Angular 7 - typescript 语法

Question

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

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>

typescript

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 部分，它是一个函数吗？MovingDirection 是如何传递的？基本上我只需要了解从 html 部分到 typescript 部分的整个语法。

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

我很乐意澄清您仍然有的任何疑问。