Angular Material Stepper 组件的 StepState 是什么答案

【问题标题】：What are the StepState of an Angular Material Stepper ComponentAngular Material Stepper 组件的 StepState 是什么
【发布时间】：2019-03-31 16:30:53
【问题描述】：

我正在尝试自定义step-numbers，例如1、2、3，在步进器的initial state 中为每个步骤显示不同的图标

我目前可以通过在ng-template 状态下使用matStepperIcon 值edit 来替换step-numbers，如下所示

有了这个，我看到只有当我们进入下一步时，前面的步骤 step-number 才会更改为 icon (donut_large)。

  <mat-vertical-stepper [linear]="isLinear" #stepper>
        <ng-template matStepperIcon="edit"><mat-icon>donut_large</mat-icon> </ng-template>
    <mat-step >

...为简洁起见排除代码 ...

1) 我是否需要将 donut_large 图标与其他 matStepperIcon 值一起使用，而不是 edit 。所以看到 donut_large 图标也显示在 Steppers reset 状态的台阶上。 2) 可以使用所有其他StepState 值，因为当我尝试使用done 或reset 等任何其他值时，matStepperIcon 不起作用。它仅在我将值用作 edit 时才有效。根据角度材料网站matStepperIcon 上的文档，指的是

@Input('matStepperIcon') | name: StepState | Name of the icon to be overridden.

【问题讨论】：

你能把stackblitz.com的例子放在一起吗？

标签： angular angular-material angular-material2

【解决方案1】：

这是 Angular Material（更准确地说是 CDK）中的 StepState（来自source code）：

/** The state of each step. */
export type StepState = 'number' | 'edit' | 'done' | 'error' | string;

/** Enum to represent the different states of the steps. */
export const STEP_STATE = {
  NUMBER: 'number',
  EDIT: 'edit',
  DONE: 'done',
  ERROR: 'error'
};

这是一个示例代码：

<mat-vertical-stepper #stepper>

  <ng-template matStepperIcon="edit">
    <mat-icon>fingerprint</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="done">
    <mat-icon>done</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="number">
    <mat-icon>code</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="error">
    <mat-icon>highlight_off</mat-icon>
  </ng-template>

  <mat-step>
    <ng-template matStepLabel>Step 1 label</ng-template>
    <p>Step 1</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 2 label</ng-template>
    <p>Step 2</p>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Step 3 label</ng-template>
    Step 3
  </mat-step>

</mat-vertical-stepper>

您也可以创建自己的步骤，查看 StackBlitz 的 docs 或 example。

【讨论】：