Angular 9 - 删除 Angular Material Stepper 上的默认图标（创建）

Posted 2023-05-07

【中文标题】Angular 9 - 删除 Angular Material Stepper 上的默认图标（创建）

【英文标题】：Angular 9 - Remove default icon (create) on Angular Material Stepper

【发布时间】：2020-07-07 15:07:31

【问题描述】：

我在使用 Angular 时遇到了这个烦人的问题：我通过添加到页面的 provides 来覆盖步进图标：

provide: STEPPER_GLOBAL_OPTIONS, useValue: displayDefaultIndicatorType: false, showError: true

这是 html 页面（只是一块，复制/粘贴了 7 个元素）：

<mat-horizontal-stepper>

  <!-- AREA -->
  <mat-step label="Step 1" state="area">
    <p>Put down your phones</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <!-- QUESTION -->
  <mat-step label="Step 2" state="question">
    <p>Socialize with each other</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

  <!-- MODE -->
  <mat-step label="Step 3" state="mode">
    <p>Socialize with each other</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

...

<!-- Icon overrides -->
  <!-- AREA -->
  <ng-template matStepperIcon="area">
    <mat-icon>gavel</mat-icon>
  </ng-template>

  <!-- QUESTION -->
  <ng-template matStepperIcon="question">
    <mat-icon>contact_support</mat-icon>
  </ng-template>

  <!-- MODE -->
  <ng-template matStepperIcon="mode">
    <mat-icon>forum</mat-icon>
  </ng-template>
...

如您所见，这只是您可以在 Angular 9 documentation 上找到的示例

好吧，现在让我来介绍几个图像的问题：

看看圆圈，它们里面应该有自己的图标（gavel、constact_support、forum）。但是，当我执行其中一个步骤时，它会将图标替换为另一个图标，准确地说是 create icon。

现在，如果我回到第二步，进入圆圈会生成正确的图标，而不会出现这种烦人的覆盖：

我已经试过了：

在<mat-step> 组件上设置[completed]=false，但它只是将复选图标移除到之前的圈子中 覆盖图标：

<ng-template matStepperIcon="edit">
  <mat-icon>gavel</mat-icon>
</ng-template>

但它没有用，因为它只是覆盖了图标，所以问题仍然存在。我还尝试将<mat-icon></mat-icon> 留空，但当然它只会在圆圈中留下一个空白图标。

我想要实现的是绕过这种“自动覆盖”。有什么想法吗？

【参考方案1】：

here 是适合我的解决方案

<mat-horizontal-stepper #stepper>
    <mat-step label="Information">...</mat-step>
    <mat-step label="Groups">...</mat-step>
    <mat-step label="Validate">...</mat-step>
    <ng-template matStepperIcon="number" let-index="index">
        <mat-icon>index === 0 ? 'perm_contact_calendar' : index === 1 ? 'group' : 'done'</mat-icon>
    </ng-template>
</mat-horizontal-stepper>

@Component(
  selector: 'app-stepper-component',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.scss']
)
export class StepperComponent implements AfterViewInit 
  @ViewChild('stepper') stepper: MatHorizontalStepper;
  ngAfterViewInit() 
    this.stepper._getIndicatorType = () => STEP_STATE.NUMBER;
  

或者，覆盖matStepperIcon="number" 和matStepperIcon="edit"：

<mat-horizontal-stepper>
    <mat-step label="Information">...</mat-step>
    <mat-step label="Groups">...</mat-step>
    <mat-step label="Validate">...</mat-step>

    <ng-template matStepperIcon="number" let-index="index">
        <mat-icon>index === 0 ? 'perm_contact_calendar' : index === 1 ? 'group' : 'done'</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="edit" let-index="index">
        <mat-icon>index === 0 ? 'perm_contact_calendar' : index === 1 ? 'group' : 'done'</mat-icon>
    </ng-template>
</mat-horizontal-stepper>