如何防止MatHorizo​​ntalStepper中的click事件出现默认行为

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（）在用户单击“是”或“否”之前返回，这意味着单击事件处理程序将在用户单击“是”或“否”之前返回。然后，发生单击事件的默认行为：步进器转到下一页。 event.peventDefault（）并未阻止它。

我想做的是停止默认行为，然后在用户单击“是”时以编程方式转到下一页。但是我需要知道如何停止默认行为（或在我以编程方式取消暂停之前将其暂停）。

Answer 1

一种解决方案：

1. 删除该按钮上的matStepperNext指令 获得访问权限
2. 使用@ViewChild(MatStepper, {static:true})来访问组件打字稿文件中的步进器，并将其存储在成员变量中（例如，“ stepper”）-请注意，更高的角度版本中需要静态字段。
3. 在ValidateCurrentPage（）中，调用this.stepper.next()以触发步进器进行下一步。

希望有帮助！更多草原信息：https://material.angular.io/components/stepper/api