Question

是否可以在 stepper内重置（或只是跳到第一步）？文档中没有记录，但是可以这样做吗？在文档中声明步进器是基于“CDK Stepper”（link？）构建的，但我找不到任何能够让我实现目标的例子。

Answer 1

好吧，我似乎找到了一个解决方案（但是在API的任何地方都没有说明。）

添加对步进器的引用，然后在组件打字稿文件中添加ViewChild引用。
创建一个方法来更改步进器的索引。

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 demo

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

角4＆amp;材料步进器

3 个答案: