angular - Angular 7 - 打字稿语法

Question

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

的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"在public canExitStep1: (MovingDirection)TypeScript 部分。

在打字稿部分，那是一个函数吗？如何MovingDirection传递？基本上我只需要了解从一个html部分到另一个部分的整个语法typescript。

标签： angulartypescript

Answer 1

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

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