Angular 4和Material Stepper

Question

是否可以在步进器内重置(或只是跳到第一步)？文档中没有记录,但是可以这样做吗？在文档中声明步进器是建立在"CDK Stepper"(链接？)上的,但我找不到任何能够引导我实现目标的例子.

Answer 1

好吧,似乎我找到了一个解决方案(但它没有在API的任何地方说明).

1. 添加对步进器的引用,然后ViewChild在组件样本文件中添加引用.
2. 创建一个方法来更改步进器的索引.

HTML:

<mat-horizontal-stepper [linear]="true" #stepper>
    <!-- Content here -->
</mat-horizontal-stepper>

TS:

import { Component, ViewChild } from '@angular/core';
@Component({
    // ...
})
export class AppComponent {
    @ViewChild('stepper') stepper;

    /**
     * Changes the step to the index specified
     * @param {number} index The index of the step
     */
    changeStep(index: number) {
        this.stepper.selectedIndex = index;
    }
}

Answer 2

可以跳转到特定的步进器.MatStepper公开一个公共属性selectedIndex,指定当前选定的步骤索引.它可以设置.索引从0开始.

在您的模板中:

在步进器中添加一个id,例如#stepper.然后在步骤中添加一个按钮,并在函数中传递步进器ID,(click)如下所示:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <!-- Your other steps here -->
    <mat-step [stepControl]="secondFormGroup">
        <!-- Content in the step -->
        <div>
            <!-- Other actions here -->                 
            <button mat-button (click)="resetStepper(stepper)">Reset</button>
        </div>
    </mat-step>
    <!-- More steps here -->
</mat-horizontal-stepper>

..并在你的打字稿中:

import { MatStepper } from '@angular/material';

exported YourOwnComponent {

  constructor() {}

  resetStepper(stepper: MatStepper){
     stepper.selectedIndex = 0;
  }
}

Stackblitz演示