Angular Material 7 – Stepper

在Angular Material 7中，Stepper是一个非常实用的组件，其功能类似于一个向导，以便用户按顺序完成一些操作。在本篇文章中，我们将学习如何使用Angular Material 7中的Stepper组件。

安装Angular Material

在使用Stepper组件之前，我们需要安装Angular Material 7。首先，我们需要确保我们的项目中安装了Angular和Angular CLI。其次，我们需要通过以下命令安装Angular Material和Angular CDK（组件开发工具包）：

npm install --save @angular/material @angular/cdk

此外，我们还需要安装浏览器动画模块：

npm install --save @angular/animations

在完成以上步骤后，我们需要在模块中导入Angular Material的模块。在项目的根模块中，我们应该将Angular Material的模块导入到NgModule的imports数组中，如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatStepperModule } from '@angular/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatStepperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建一个简单的Stepper

现在，我们已经安装并导入了Angular Material组件，我们可以开始创建我们的第一个Stepper。在下面的示例中，我们将创建一个2步骤的向导，以便用户提供用户名和电子邮件。我们将使用MatStepper组件来创建向导，并将MatStep组件用作其中的步骤。

<mat-stepper>
  <mat-step label="Step 1">
    <p>Enter your name:</p>
    <mat-form-field>
      <input matInput placeholder="Name">
    </mat-form-field>
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step label="Step 2">
    <p>Enter your email:</p>
    <mat-form-field>
      <input matInput placeholder="Email">
    </mat-form-field>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Finish</button>
  </mat-step>
</mat-stepper>

在上面的代码中，我们首先使用MatStepper组件创建了一个向导。在这个Stepper组件中，我们定义了两个步骤，分别用来输入用户名和电子邮件。对于每个步骤，我们使用了MatStep组件，并在label属性中定义了步骤的标题。在每个步骤中，我们使用了mat-form-field和matInput来创建输入框。在最后一个步骤中，我们还添加了两个按钮，一个是matStepperPrevious用于回退到上一个步骤，另一个是matStepperNext用于完成向导。

控制Stepper的状态

现在，我们已经创建了一个简单的Stepper，但是我们还没有控制它的状态。在Angulra Material 7中，我们可以使用MatStepper组件的selectedIndex属性来控制步骤的状态。例如，我们可以将selectedIndex设置为0来表示第一个步骤是当前步骤。我们也可以使用MatStepper组件的next和previous方法来控制向导的状态，如下所示：

<mat-horizontal-stepper #stepper>
  <mat-step label="Step 1">
    <p>Enter your name:</p>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="Name">
    </mat-form-field>
    <button mat-button (click)="stepper.next()">Next</button>
  </mat-step>
  <mat-step label="Step 2">
    <p>Enter your email:</p>
    <mat-form-field>
      <input matInput [(ngModel)]="email" placeholder="Email">
    </mat-form-field>
    <button mat-button (click)="stepper.previous()">Back</button>
    <button mat-button (click)="stepper.reset()">Reset</button>
    <button mat-button (click)="stepper.next()">Finish</button>
  </mat-step>
</mat-horizontal-stepper>

在上面的代码中，我们使用了MatHorizontalStepper组件来创建一个水平的向导。我们还使用了模板引用变量#stepper来获取MatStepper组件的实例。在第一个步骤中，我们使用了[(ngModel)]双向绑定来获取用户输入的用户名。在第二个步骤中，我们使用了相同的方式来获取用户输入的电子邮件。在第二个步骤中，我们还添加了三个按钮，分别是Back、Reset和Finish。在这些按钮上，我们使用了click事件来调用MatStepper组件的next、previous和reset方法。

添加步骤动态添加步骤

在某些情况下，我们可能希望动态添加步骤到我们的Stepper中，而不是在模板中硬编码。在Angular Material 7中，我们可以通过在我们的组件中动态操作Step对象来实现这一点。

<mat-horizontal-stepper #stepper>
  <mat-step label="Step 1">
    <p>Enter your name:</p>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="Name">
    </mat-form-field>
    <button mat-button (click)="addStep()">Add Step</button>
  </mat-step>
</mat-horizontal-stepper>

在上面的代码中，我们定义了一个按钮，用于动态添加步骤。在点击该按钮时，我们将调用addStep方法来添加一个新的步骤。下面是addStep方法的实现：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatStep, MatStepper } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  name: string;
  email: string;
  @ViewChild('stepper') private myStepper: MatStepper;

  ngAfterViewInit(): void {
    this.myStepper.selectedIndex = 0;
  }

  addStep() {
    const step = new MatStep();
    step.label = 'Step 3';
    this.myStepper.addStep(step);
  }
}

在上面的代码中，我们首先使用@ViewChild装饰器来获取MatStepper组件的实例。在ngAfterViewInit生命周期钩子中，我们将selectedIndex属性设置为0，以确保第一个步骤是当前步骤。在addStep方法中，我们创建了一个新的MatStep对象，并将其添加到MatStepper中。在新的MatStep中，我们设置了label属性，以便我们可以区分不同的步骤。你可以自由地使用MatStep对象来设置其他属性，例如description或icon等。

自定义步骤模板

在某些情况下，我们可能希望自定义每个步骤的模板，以便我们可以控制向导的外观。在Angular Material 7中，我们可以使用MatStep组件的自定义模板来实现这一点。下面是一个简单的实例：

<mat-stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>edit</mat-icon>
  </ng-template>
  <mat-step label="Step 1" [stepControl]="step1Form">
    <form [formGroup]="step1Form">
      <input matInput placeholder="Name" formControlName="name">
    </form>
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step label="Step 2" [stepControl]="step2Form">
    <form [formGroup]="step2Form">
      <input matInput placeholder="Email" formControlName="email">
    </form>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Finish</button>
  </mat-step>
</mat-stepper>

在上面的代码中，我们使用了ng-template来定义一个自定义图标，该图标将应用于所有的步骤。然后，我们使用了[stepControl]属性来将表单控制器绑定到每个步骤中。在每个步骤的模板中，我们定义了一个带有formGroup指令的form元素，以便我们可以使用Angular表单来管理输入项。在每个表单中，我们使用了matInput指令来创建输入框，并将其绑定到相应的表单控制器上。在第一个步骤中，我们添加了一个matStepperNext按钮，以便用户可以继续到下一个步骤。在第二个步骤中，我们添加了两个按钮，一个用于回退到上一个步骤，另一个用于完成向导。