代码之家 › 专栏 › 技术社区 › Celia

角度步进器:在更改步进时显示弹出窗口

angular-material angular

Celia · 技术社区 · 3 年前

我使用Angular和Material。我有一个步进器,我想在更改步骤之前显示一条对话框消息,询问用户是否要更改步骤。问题是,在显示弹出窗口和用户答案之前,步骤正在发生变化。Yout可以在这里找到我的例子: 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
              
            }
          });
      
  }

提前感谢。

0 回复 | 直到 3 年前

OLO 3 年前

在弹出窗口打开之前,步进器会进入下一步,这是很正常的,因为您是在stepChage事件中打开弹出窗口的,当您单击带有matStepperNext指令的按钮时,会调用stepChage。您可以通过在下一个按钮中使用自定义点击事件而不是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; 在您的组件中。