Angular 4 & Material Stepper

Question

是否可以在步进器内部重置（或只是跳到第一步）？ 它没有记录在文档中，但是有可能这样做吗？ 文档中指出步进器是基于“CDK 步进器”（ 链接？）构建的，但我找不到任何可以引导我实现目标的示例。

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 。 然后在您的步骤中添加一个按钮，并在(click)函数中传递步进器 ID，如下所示：

<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 演示

Answer 3

在 html 模板中，使用#stepper引用您的步进器

<mat-horizontal-stepper #stepper>
</mat-horizontal-stepper>

并在您的打字稿文件中声明步进器

@ViewChild("stepper", { static: false }) stepper: MatStepper;

之后，您可以使用他的 selectedIndex 属性设置步进器步骤

 this.stepper.selectedIndex = 0; //0 is the index of the first step