覆盖mat-stepper angular material中的默认图标

Question

我试图覆盖步进材料角度的默认编辑图标，但这并不起作用。

我尝试：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
   <mat-step>
      <form>
           <ng-template matStepperIcon="edit">
                <mat-icon>home</mat-icon>
           </ng-template>

    ...

</mat-horizontal-stepper>

这是我的结果:

当步进电机处于活动/非活动状态时:

https://istack.dev59.com/upB0e.webp
https://istack.dev59.com/tU143.webp

我需要做一些特别的事情吗?

Stackblitz: 点击材料页面后，主页图标不在蓝色圆圈内。

https://stackblitz.com/edit/angular-material-design-wxawqh

- veroneseComS

---

请查看此链接：https://github.com/angular/components/issues/8997#issuecomment-384444770 - Himanshu Shekhar

Answer 1

我创建了一个示例，其中默认编辑图标已更改：Stackblitz。

将更改后的编辑图标定义放在 <mat-step>...</mat-step> 外部即可正常工作（已测试最新的Angular 7.0.2）：

<mat-horizontal-stepper [linear]="isLinear">

  <!-- change default 'edit' icon -->
  <ng-template matStepperIcon="edit">
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>

  <mat-step label="Antes de começar...">
    <div>
        <button mat-button matStepperNext>Continuar</button>
    </div>
  </mat-step>

此外，我添加了一些示例以更改不同步骤的图标（请查看 Stackblitz 中的注释）。为了使其起作用，您需要向组件添加提供程序：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';

@Component({
  selector: 'with-material-app',
  templateUrl: './withmaterial.component.html',
  styleUrls: ['./withmaterial.component.css'],
  providers: [{
    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
  }]
})
export class WithMaterialComponent implements OnInit {
  ...
}

然后将您的mat-horizontal-stepper更改为以下内容：

<mat-horizontal-stepper [linear]="isLinear">

    <!-- change default 'edit' icon -->
    <ng-template matStepperIcon="edit">
        <mat-icon>bubble_chart</mat-icon>
    </ng-template>

    <!-- changed step icons -->
    <ng-template matStepperIcon="home">
        <mat-icon>home</mat-icon>
    </ng-template>

    <mat-step label="Antes de começar..." state="home">
        <div>
            <button mat-button matStepperNext>Continuar</button>
        </div>
    </mat-step>

  ...

</mat-horizontal-stepper>

ng-template with matStepperIcon='xyz'会改变状态为"xyz"的mat-step的图标。

- coreuter

---

如果您无法导入 MAT_STEPPER_GLOBAL_OPTIONS，请尝试使用 STEPPER_GLOBAL_OPTIONS。 - Reza Saadati

Answer 2

为了扩展已接受的答案：我想保留步骤号而不是替换图标。可以使用以下方法实现：

<mat-horizontal-stepper linear #stepper >
  <ng-template matStepperIcon="edit" let-index="index">{{index + 1}}</ng-template>
  <ng-template matStepperIcon="done" let-index="index">{{index + 1}}</ng-template>
  <mat-step>
    <!-- add steps as usual -->
  </mat-step
</mat-horizontal-stepper>

- blindfish

Answer 3

这个例子对我有效：

这个例子对我有效：

<mat-horizontal-stepper labelPosition="bottom" #stepper color="primary" linear >        
    <!-- Define the edit icon, by default is 'create' -->
    <ng-template matStepperIcon="edit">
        <mat-icon>done</mat-icon>
    </ng-template>

    <!-- Define the number of the step -->                  
    <ng-template matStepperIcon="number" let-index="index">
    {{index+1}}
    </ng-template>

    <!-- Make your steps -->
    <mat-step label="Step 1">
        Stepper 1
    </mat-step>
    <mat-step label="Step 2">
        Stepper 2
    </mat-step>
</mat-horizontal-stepper>

- José Salina

---

每个步骤是否可以使用不同的编辑图标？ - meDeepakJain

Answer 4

我认为你应该首先查阅Angular Material的文档和示例来寻找答案。

覆盖图标的方法被简单明了地描述了。

https://material.angular.io/components/stepper/overview#overriding-icons

来自文档：

默认情况下，步骤标题将使用通过元素从Material Design图标集创建和完成的图标。如果您想提供不同的图标集，可以通过放置matStepperIcon来覆盖每个要覆盖的图标。每个步骤的索引、活动和可选值都可以通过模板变量获得：

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <mat-icon>insert_drive_file</mat-icon>
  </ng-template>

  <ng-template matStepperIcon="done">
    <mat-icon>done_all</mat-icon>
  </ng-template>

  <!-- Custom icon with a context variable. -->
  <ng-template matStepperIcon="number" let-index="index">
    {{index + 10}}
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

- Antoniossss

---

我尝试按照文档中描述的方式进行相等比较。 - veroneseComS

你的 StackBlitz 运行得很好，只是你把模板放错了位置 -> https://stackblitz.com/edit/angular-material-design-zh1ffm?file=src/app/withmaterial/withmaterial.component.html - Antoniossss

谢谢。重写数字有所帮助。我遇到了这样的情况，第一个选项卡应该从3开始。 - Swapnil Patwa

Answer 5

在我的情况下，我想要覆盖每个步骤的图标，而不管步骤所处的状态 - 即使某个步骤被编辑或已经完成，它也始终显示同样的图标。我如下实现：

在模板中：

<mat-stepper>
  <ng-template #stepperIcon>
    <mat-icon>home</mat-icon>
  </ng-template>
  <mat-step label="Step 1">
    ...
  </mat-step>

  <ng-template #stepperIcon>
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>
  <mat-step label="Step 2">
    ...
  </mat-step>
  
  <ng-template matStepperIcon="number" let-index="index">
    <ng-container [ngTemplateOutlet]="matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
  <ng-template matStepperIcon="edit" let-index="index">
    <ng-container [ngTemplateOutlet]="matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
  <ng-template matStepperIcon="done" let-index="index">
    <ng-container [ngTemplateOutlet]="matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
  <ng-template matStepperIcon="error" let-index="index">
    <ng-container [ngTemplateOutlet]="matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
</mat-stepper>

在组件中：

export class Component implements AfterViewInit {

  @ViewChildren('stepperIcon') private matStepperIconViewChildren;

  matStepperIcons: any[];

  ngAfterViewInit(): void {
    this.matStepperIcons = this.matStepperIconViewChildren.toArray();
  }
}

当然，这取决于图标模板与相关步骤的顺序相同，并且与它们之间存在一对一的关系。

- Chris Peacock