angular - 材料步进器 | 标题导航导致方法执行两次

Question

我在每个步骤中都使用带有动态表单的步进器。我已经为返回和下一步按钮创建了方法，我在单击下一步和返回按钮时调用它们，如下所示：

 <button (click)="previousStage()" mat-raised-button matStepperPrevious>BACK</button>
 <button mat-raised-button matStepperNext (click)="nextStage()">Next</button>

现在我还想在用户单击标题导航时前后移动，所以我也为此创建了一个方法：

 <mat-horizontal-stepper [linear]="true (selectionChange)="onNavChange($event)">

在 onNavChange(event) 内部。我根据步骤名称调用方法 next 或 sub 。

问题是，当我单击下一个按钮时，它会被调用两次......首先它调用 onNavChange($event) 然后调用下一个按钮的方法。

我怎样才能确保它只被调用一次？有没有办法让 onNavChange() 仅在单击标题时才执行？

Answer 1

在没有看到您的完整或示例nextStage($event)方法的情况下，我分析了这个问题。但是，我在我的模板中使用(click.prevent)。在您的示例中尝试

<button mat-raised-button matStepperNext (click.prevent)="nextStage()">Next</button>

另外，对 ? 进行了哪些检查currentStep？这样，当您在上时，currentstep您只能导航。

Answer 2

感谢您的帮助，但这是一个简单的解决方案。这就是我所做的： 1. 从 Next 和 Previous 按钮中删除了函数调用。我将matStepperPrevious保留为后退，将matStepperNext 保留为下一个按钮。2. 仅在selectionChange()上调用所需的方法。

我注意到当步骤发生变化时会调用 selectionChange()，这可能发生在单击标题或按钮时，所以我只在 selectionChange() 上调用了我的函数。

Answer 3

一个可能的解决方案是使用 ViewChild 来控制步进器：

@ViewChild('stepper', {static: false}) stepper: MatStepper;

现在您可以使用 observable 本身，并使用 RXJS 运算符来过滤 dobule 请求：

stepper.selectionChange.pipe(take(1)).subscribe(console.log)