覆盖垫步进器角度材质的默认图标

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

我有什么特别的事要做吗？

堆叠闪电战：在材料页面中单击。主页图标不在蓝色圆圈内。

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

Answer 1

我创建了一个更改默认编辑图标的示例：Stacklitz。

将更改后的编辑图标的定义移动到<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>

此外，我还添加了一些更改不同步骤图标的示例(请查看Stacklitz中的注释(。为了实现这一点，您需要在组件中添加一个提供者：

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>

具有matStepperIcon='xyz'的ng-template改变具有state="xyz"的mat-step的图标。

Answer 2

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

覆盖图标以简单的方式描述

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

来自文档：

默认情况下，步骤标题将使用通过元素设置的材质设计图标。如果你想提供一组不同的图标，可以通过放置要覆盖的每个图标的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 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

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

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

当然，这取决于图标模板的定义顺序与它们所涉及的步骤相同，并且与它们有一对一的关系。