Question

Angular 6应用

stepper.component.html，

 <mat-horizontal-stepper #stepper (selectionChange)="selectedStep($event)">
    <ng-template matStepperIcon="edit">
      <mat-icon>check_circle</mat-icon>
    </ng-template>

    <ng-template matStepperIcon="number" let-index="index">
      <mat-icon>check_circle</mat-icon>
    </ng-template>

    <mat-step>
      <ng-template matStepLabel >Fill</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel >Validate</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Complete</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

stepper.component.ts，

@ViewChild('stepper') stepper: MatStepper;
stepIndex = 2;

ngAfterViewInit() {
  this.stepper._steps.forEach((step, index) => {
  const currentStepId = ++index;
  if (this.stepIndex >= currentStepId) {
    step.select(); //This will set the header selected state
   }
  });
}

selectedStep(matStep: any) {
 const selectedStep = ++matStep.selectedIndex;
 console.log(selectedStep);
}

上面的代码将设置stepIndex属性为2时选择的前两个步骤。

我想根据所选的当前步骤重置前进/后退步骤

如果当前步骤为2。选择步骤1时，我要取消选择/重置步骤2。
如果当前步骤为1。当选择了步骤3时，我还要设置步骤2的选定状态。

Answer 1

    <mat-horizontal-stepper [linear]="true" #stepper>
      <mat-step #one>

      </mat-step>
      <mat-step #two>

      </mat-step>
      <mat-step #three>

      </mat-step>
      <mat-step #four>
        <button mat-button (click)="changeStep(0)">Go first</button>
      </mat-step>
    </mat-horizontal-stepper>

在组件代码中：

import {Component, ViewChild} from '@angular/core';

import {MatStep, MatStepper} from '@angular/material/stepper';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {

  @ViewChild('stepper') stepper: MatStepper;
  @ViewChild('one') one: MatStep;
  @ViewChild('two') two: MatStep;
  @ViewChild('three') three: MatStep;
  @ViewChild('four') four: MatStep;

  changeStep(index: number): void {
    this.four.reset(); // resets 4th
    this.three.reset(); //resets 3rd
    this.stepper.selectedIndex = index; // move selected index (in html I set 1st)
  } 
}

这将使您进入第一步，但第三步和第四步将被重置

Answer 2

我刚刚找到了另一个解决方案，它看起来更好并且可以自动化该过程：

<mat-horizontal-stepper [linear]="true" #stepper (selectionChange)="clearNextSteps($event)">
      <mat-step>

      </mat-step>
      <mat-step>

      </mat-step>
      <mat-step>

      </mat-step>
      <mat-step>
      </mat-step>
    </mat-horizontal-stepper>

然后在组件中添加：

  @ViewChild('cinemaStep') cinemaStep: MatStep;
  @ViewChild('seatsStep') seatsStep: MatStep;
  @ViewChild('servicesStep') servicesStep: MatStep;
  @ViewChild('confirmStep') confirmStep: MatStep;

  clearNextSteps(stepper): void {
    const index = stepper.selectedIndex;
    switch (index) {
      case 0:
        this.seatsStep.reset();
      case 1:
        this.servicesStep.reset();
      case 2:
        this.confirmStep.reset();
    }
  }

单击上一步时，垫步进器重置前进步骤-Angular 6

2 个答案: