步骤:不要更改图标

Question

我正在使用Stepper组件。

<mat-stepper orientation="vertical">
  <mat-step state="home">
    <ng-template matStepLabel>Step 1</ng-template>
    <ng-template matStepContent>
      <p>This content was rendered lazily</p>
      <button mat-button matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step state="form">
    <ng-template matStepLabel>Step 2</ng-template>
    <ng-template matStepContent>
      <p>This content was also rendered lazily</p>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </ng-template>
  </mat-step>
  <mat-step state="last">
    <ng-template matStepLabel>Step 3</ng-template>
    <p>This content was rendered eagerly</p>
    <button mat-button matStepperPrevious>Back</button>
  </mat-step>

  <!-- changed step icons -->
  <ng-template matStepperIcon="home">
    <mat-icon>home</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="form">
    <mat-icon>format_align_center</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="last">
    <mat-icon>done_all</mat-icon>
  </ng-template>
</mat-stepper>

每当用户单击某个步骤时，我都可以更改该图标，但只要该步骤不活动，图标就会被编辑或完成。我希望自定义图标始终保持不变。因此，当您单击另一个步骤时，前面的步骤不应该更改为home图标。

我该怎么做？

请参阅斯塔克布利茨

Answer 1

您可以通过定义与自定义步骤图标相同的自定义“编辑”和“已完成”图标来做到这一点。

<!-- change default 'edit' & 'done' icon -->
<ng-template matStepperIcon="edit" let-index="index">
  <ng-container [ngSwitch]="index">
    <mat-icon *ngSwitchCase="0">home</mat-icon>
    <mat-icon *ngSwitchCase="1">format_align_center</mat-icon>
    <mat-icon *ngSwitchCase="2">done_all</mat-icon>
  </ng-container>
</ng-template>
<ng-template matStepperIcon="done" let-index="index">
  <ng-container [ngSwitch]="index">
    <mat-icon *ngSwitchCase="0">home</mat-icon>
    <mat-icon *ngSwitchCase="1">format_align_center</mat-icon>
    <mat-icon *ngSwitchCase="2">done_all</mat-icon>
  </ng-container>
</ng-template>

见编辑后的斯塔克布利茨