从 mat-stepper 角度材料覆盖默认图标

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://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png

有什么特别的事情我必须做吗？

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

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

Answer 1

我创建其中默认的编辑图标来改变的例子： Stackblitz 。

将你的改变的编辑图标的定义之外 <mat-step>...</mat-step ，它应该工作（与最新的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与matStepperIcon='xyz'改变的图标mat-step与state="xyz" 。

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>

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>

Answer 4

我认为，您首先应该寻找答案的是Angular Material文档和示例。

覆盖图标的描述很简单

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

从文档：

默认情况下，步骤标题将使用通过元素的“材料设计”图标集中的创建和完成图标。 如果要提供不同的图标集，可以通过为要覆盖的每个图标放置一个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>

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();
  }
}

这当然依赖于以与它们相关的步骤相同的顺序定义的图标模板，并且与它们具有一对一的关系。