Angular 7 - TypeScript语法

Question

我只需要理解下面的语法。 我正在使用angular-archwizard库在我的html页面中创建向导。

HTML：

<aw-wizard #wizard>
  <aw-wizard-step [stepTitle]="'Steptitle 1'" [canExit]="canExitStep1">
    <div class="centered-content">
      <div>
        Content: Step 1
      </div>

      <div class="checkbox">
        <input type="checkbox" />
        <label>Allow exiting step 1</label>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-secondary" awNextStep>Continue</button>
      </div>
    </div>
  </aw-wizard-step>
</aw-wizard>

类型脚本

import {Component, OnInit} from '@angular/core';
import {MovingDirection} from 'angular-archwizard';

@Component({
  selector: 'app-can-exit-event',
  templateUrl: './can-exit-event.component.html',
  styleUrls: ['./can-exit-event.component.css']
})
export class CanExitEventComponent implements OnInit {

  public canExitStep1: (MovingDirection) => boolean = (direction) => {
    switch (direction) {
      case MovingDirection.Forwards:
        return true;
      case MovingDirection.Backwards:
        return false;
      case MovingDirection.Stay:
        return true;
    }
  };

  constructor() {
  }

  ngOnInit() {
 }
}

我感兴趣的是：[canExit]="canExitStep1"和TypeScript部分中的public canExitStep1: (MovingDirection)。

在TypeScript部分，canExitStep1是一个函数吗？MovingDirection如何传递？基本上，我只需要了解从html部分到typescript部分的整个语法即可。

- Kihats

Answer 1

[canExit]可以是boolean或function。该函数接受一个MovingDirection枚举值，并返回Promise<boolean>或boolean。此函数包含您需要执行的任何其他检查或验证，以决定是否可以退出步骤（到下一步和上一步）。如果在步骤更改期间没有执行逻辑，请将boolean作为[CanExit]的值传递。

为了更容易理解，您可以将函数声明和函数定义分开写。

声明：

public canExitStep1: (MovingDirection) => boolean;

定义：

 ngOnInit() {
    this.canExitStep1 = (direction) => {
      switch (direction) {
        case MovingDirection.Forwards:
          return true;
        case MovingDirection.Backwards:
          return false;
        case MovingDirection.Stay:
          return true;
      }
    };
 }

您可以在此处阅读有关[CanExit]函数的更多信息 - https://www.npmjs.com/package/angular-archwizard#canexit

如果您还有任何疑问，我很乐意为您解答。

- abd995

---

我已经阅读了文档，只是无法为[canExit]编写函数，所以在他们的Github上碰巧发现了上面那个例子。那么这部分public canExitStep1: (MovingDirection) => boolean = (direction) =>是否意味着它是一个接受MovingDirection并返回boolean的函数？如果是这样，那么语法对我来说有点奇怪 :-) - Kihats

也许如果你将声明和定义分开，理解 canExit 方法会更容易。我已经进行了更新，就像这样。如果现在可以理解，请告诉我。 - abd995

嗯，那很有道理。谢谢。 - Kihats