我只需要理解下面的语法。我在我的 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
部分的整个语法。
最佳答案
[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
我很乐意澄清您仍然有的任何疑问。
关于Angular 7 - typescript 语法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59243223/