angular - 如何防止 MatHorizo​​ntalStepper 中点击事件的默认行为

Question

我在 Angular 应用程序中工作。我有一个 MatHorizo​​ntalStepper，我想知道如何防止下一步和后退按钮的默认行为。我以为我可以在点击处理程序中使用 event.preventDefault() 但这似乎不起作用。

这是按钮的 HTML:

<mat-horizontal-stepper>
…
  <button *ngIf="scrnIndex > 0" mat-raised-button matStepperPrevious type="button" (click)="backClicked($event, scrnIndex)">Back</button>
  <button *ngIf="scrnIndex < formScreens.length - 1" mat-raised-button matStepperNext type="button" (click)="nextClicked($event, scrnIndex)”>Next</button>
…
</mat-horizontal-stepper>

这是点击处理程序:

nextClicked(event, screenIndex) {
  event.preventDefault();
  this.validateCurrentPage(screenIndex);
}

我想做的是阻止步进器进入下一页，直到用户在响应页面上的任何无效值而出现的对话框中单击“确认”(这意味着我们不一定要阻止用户继续使用无效值，但我们确实想通过对话框警告他们)。

函数 ValidateCurrentPage() 进行检查并在检测到任何无效值时弹出对话框:

ValidateCurrentPage() {
    …
  const dialog = new GeneralDialogModel(
    'Past Dates/Times Detected',  // Title
    'One or more dates and/or times are in the past. Is this intentional?', // Content text
    'Yes',                        // Confirm button text
    'No');                        // Cancel button text
  const dialogRef = this._dialog.open(GeneralDialogComponent, { data: dialog });
  dialogRef.afterClosed().subscribe(result => {
…
  });
…
}

因为对话框在不同的线程上运行，validateCurrentPage() 在用户单击"is"或“否”之前返回，这意味着单击事件处理程序在用户单击"is"或“否”之前返回。然后发生单击事件的默认行为:步进器转到下一页。 event.peventDefault() 没有阻止它。

我想做的是停止默认行为，然后在用户单击"is"时以编程方式转到下一页。但我需要知道如何停止默认行为(或暂停它直到我以编程方式取消暂停它)才能做到这一点。

Answer 1

一个解决方案:

1. 删除该按钮上的 matStepperNext 指令
2. 使用 @ViewChild(MatStepper, {static:true}) 访问组件 typescript 文件中的步进器并将其存储在成员变量中(比如“stepper”)——注意，在以后的 Angular 版本中需要静态字段。
3. 在 ValidateCurrentPage() 中调用 this.stepper.next()触发步进器进行下一步。

希望对您有所帮助!更多草原信息:https://material.angular.io/components/stepper/api