时间戳

首页 > 解决方案 > Angular stepper：在更改步骤时显示弹出窗口

angular - Angular stepper：在更改步骤时显示弹出窗口

问题描述

我正在使用 Angular 和 Material。我有一个步进器，我想在更改步骤之前显示一条对话框消息，以询问用户是否要更改步骤。问题是在显示弹出窗口和用户答案之前，步骤正在改变。你可以在这里找到我的例子： https ://stackblitz.com/edit/angular-angular-material-stepper-mok1em ?file=src/app/app.component.ts

下面您可以看到调用更改步骤的函数：

public onStepChange(event: any, stepper:MatStepper): void { 
    //in the stepper we have the data of current step and in the event of the clicked step  
    console.log('Current step ' + stepper.selectedIndex + " next step " + event.selectedIndex);

          const dialogRef = this.dialog.open(DialogMessageN2Component, {
            width: '500px',
            height: '500px',
            data: {},
          });
          dialogRef.afterClosed().subscribe((result) => {
            console.log('The dialog was closed' + JSON.stringify(result));
            if (result.data === 'no') {
              console.log("no");
              stepper.selectedIndex = event.selectedIndex; //go to clicked step
            }
            if (result.data === 'yes') {
              console.log("yes");
               stepper.selectedIndex = stepper.selectedIndex; // stay to the same step
              
            }
          });
      
  }

先感谢您。

标签： angularangular-material

解决方案

在打开弹出窗口之前，步进器进入下一步是正常的，因为您是在 stepChage 事件中打开弹出窗口，当您单击带有 matStepperNext 指令的按钮时会调用该事件。您可以通过在下一个按钮中使用自定义单击事件而不是 matStepperNext 指令来使其工作，如下所示：

<mat-horizontal-stepper [linear]="false" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button (click)="goToNextStep()">Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button (click)="goToNextStep()">Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

您的 goToNextStep 方法将包含：

  goToNextStep(): void {
    const dialogRef = this.dialog.open(DialogMessageN2Component, {
      width: '500px',
      height: '500px',
      data: {},
    });
    dialogRef.afterClosed().subscribe((result) => {
      console.log('The dialog was closed' + JSON.stringify(result));
      if (result.data === 'yes') {
        console.log('yes');
        this.stepper.next();
      }
    });
  }

并且不要忘记添加@ViewChild('stepper') stepper: MatHorizontalStepper;您的组件。

推荐阅读