web-dev-qa-db-ja.com

Angular 4＆Material Stepper

ステッパー 内でリセット（または単に最初のステップにジャンプ）することは可能ですか？それはドキュメントに文書化されていませんが、そうすることは可能ですか？ドキュメントには、ステッパーは「CDKステッパー」（ link ？）に基づいていると記載されていますが、目標に到達する例が見つかりません。

angularangular-materialangular-material2
21
Ben jamin

わかりました、解決策を見つけたようです（ただし、APIのどこにも記載されていません）。

  1. ステッパーへの参照を追加し、コンポーネントのTypeScriptファイルの参照に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;
    }
}
39
Ben jamin

特定のステッパーにジャンプすることが可能です。 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>

..およびTypeScriptで：

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

exported YourOwnComponent {

  constructor() {}

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

Stackblitz demo

14
Faisal