javascript - 使用 ChangeDetectorRef 检测组件状态变化以便与 Material 步进器一起步进？

Question

在 Angular 8 Material Stepper 中，我正在检查某些表单状态，如果通过，则将 stepCompleted 设置为 true。

这里有一个 Stackblitz 演示了这个: https://stackblitz.com/edit/angular-mat-stepper-demo-with-fields?file=src%2Fapp%2Fapp.component.html

问题是 Angular 不会立即接受更改，因此我们必须单击“下一步”两次。第二次单击时，它将看到状态更改。

此外，如果我们导航回该步骤并更改参数以使该步骤不再继续，Angular 仍将允许该步骤在第一次单击时继续，因为它仍然将 stepCompleted 视为 true 。在我们再次导航回来之前，这不是错误的。

我认为解决此问题的正确方法是注入(inject) ChangeDetectorRef 并像这样调用它:

stepComplete() {
   //See whether the step is complete
   //if so
   this.stepCompleted = true;
   this.cd.detectChanges();
}

想法？

Answer 1

这里的问题是 button[matStepperNext] triggers navigation在设置 completed 属性之前。

解决方案可以使用 mousedown|touchstart 事件而不是 click:

<button mat-button matStepperNext (mousedown)="toggleStep1Complete()">

<强> Forked Stackblitz

另一个想法是不要使用 button[matStepperNext] 指令并手动触发导航:

<mat-horizontal-stepper linear #stepper>
  <mat-step label="Step 1">
    ...
    <button mat-button (click)="stepper.selected.completed = true; stepper.next()">Next</button>

<强> Stackblitz Example

另请参阅:

• Completed property in Angular Material Stepper doesn't seem to work as expected