3

我正在使用 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)”&gt;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() 并没有阻止它。

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

4

1 回答 1

0

一种解决方案：

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

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

于 2019-11-25T18:48:56.730 回答