angular-material-stepper - 如何在单击“下一步”时拨打电话并决定是否继续使用 CDKStepper？

Question

我想以编程方式进入下一步，因为我有一个带有步进器控件的按钮栏组件：

<button id="cancel"
                *ngIf="showCancelButton"
                (click)="cancelWasClicked()">
          Cancel
</button>
<button id="previous"
                *ngIf="showPreviousButton"
                (click)="previousWasClicked()" matStepperPrevious>
          Previous
</button>
<button id="next"
                *ngIf="showNextButton"
                (click)="nextWasClicked()" matStepperNext>
          Next
</button>

当我单击下一步按钮时，我想触发一些外部验证，如果移动到下一步是我们想要的，结果将管理这些验证。

从文档中，有一种next方法，但如果我有这样的设置，则不确定该方法在哪里可用：

<mat-step>
   <someComponent></someComponent>
   <button-bar-component></button-bar-component> <!-- Contains the stepper buttons>
</mat-step>
<mat-step>
   <someOtherComponent></someOtherComponent>
   <button-bar-component></button-bar-component> <!-- Contains the stepper buttons>
</mat-step>
etc..

我在这里看到了一个类似的问题：Can I programmatically move the steps of a mat-h​​orizo​​ntal-stepper in Angular / Angular Material

问题是我无法访问按钮栏中步进器的 ID。我可以以某种方式将 ID 作为输入传递并调用stepper.next吗？

Answer 1

通过将我的“步进器”作为输入传递到按钮栏组件来解决我的问题。这使按钮栏组件可以访问步进器 API，因此我可以在按钮单击时执行其他逻辑。