检查Angular 6组件中的自定义回调

我使用的是Angular 2+向导组件（我在Angular 6上），我将其分叉到我的项目中，并对其进行了大量模板和样式定制。不幸的是，我选择的那个不支持其他向导中的canExit功能，所以我尝试添加它。它能够在步骤中验证表单，因此我通常能够在需要执行的不仅仅是简单的字段验证时添加另一个自定义验证函数，如：

<custom-wizard>
  <wizard-step [title]='Step 1' [isValid]='step1Form.valid && validateStep1()'>
    <form>....

在向导步骤中，我添加了以下组件：

@Input() canExit: boolean = true;

在自定义向导中，我检查此回调是否失败，如果失败，则阻止正常的步骤更改：

public next(): void {
    if(!this.activeStep.canExit){
        console.log('failed!');
        return;
    }
    else {
        //proceed to next step as usual
    }
}

问题是验证仍然被调用了很多次，我回到了我开始的地方！我读过关于使用@Output来传递函数的内容，所以我尝试了这种方法：

<custom-wizard>
  <wizard-step [title]='Step 1' [isValid]='step1Form.valid' (canExit2)='validateStep1()'>
    <form>....

---

验证步骤现在只调用一次，很好。但即使ValidateSTP1通过，我也会在if检查中失败。我相信这是因为emit不返回任何东西，而是广播。这对我来说是一个新领域。有人能指出我在这里做错了什么，以及我如何执行这个额外的验证吗？

如果有人经历过类似的事情，我就解决了我的问题。我的根本问题是，我实际上试图进行同步服务器端检查，但使用的是模板驱动的表单。我阅读了Angular文档中的反应式表单，这就是问题所在——在表单被认为有效之前，对给定的表单字段执行自定义验证

因此，我根本不需要处理向导组件，现在我可以根据服务调用的结果将表单标记为无效。更妙的是，它只在字段满足表单条件时调用验证（在我的例子中，一旦输入的长度正确，就尝试进行额外的验证）

这是一个很好的自定义异步验证概述，他唯一遗漏的是您需要将ReactiveFormsModule导入到您的模块中：

public next(): void {
    if(!this.activeStep.canExit){
        console.log('failed!');
        return;
    }
    else {
        //proceed to next step as usual
    }
}

<custom-wizard>
  <wizard-step [title]='Step 1' [isValid]='step1Form.valid' (canExit2)='validateStep1()'>
    <form>....

    @Output() canExit2: EventEmitter<any> = new EventEmitter<any>();

    public next(): void {
    if(!this.activeStep.canExit2.emit()){
        console.log('failed!');
        return;
    }
    else {
        //proceed to next step as usual
    }
}