如何将角度材料步进数字更改为任何图标或文本？答案

【问题标题】：How to change angular material stepper step numbers to any icon or text?如何将角度材料步进数字更改为任何图标或文本？
【发布时间】：2018-03-29 16:15:44
【问题描述】：

Angular Material Stepper 对我有以下问题，我无法从文档中找到这些问题。

如何显示任何字符串或 html 而不是步进索引数字？
如何在鼠标悬停任何垫步时显示matToolTip？

我正在使用最新版本的Material Angular IO。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

不幸的是，现在无法使用材质中的本机挂钩覆盖数字。一种可能的解决方案是使用 css 覆盖该值。

这里我们隐藏当前符号并使用我们自己的文本/符号：

mat-step-header .mat-step-label {
    overflow: visible;
}

mat-step-header .mat-step-icon-not-touched span,
mat-step-header .mat-step-icon span,
mat-step-header .mat-step-icon-not-touched .mat-icon,
mat-step-header .mat-step-icon .mat-icon {
  display: none;
}

mat-step-header:nth-of-type(1) .mat-step-icon-not-touched:after,
mat-step-header:nth-of-type(1) .mat-step-icon:after {
  content: 'New 1';
}

.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon-not-touched::after,
.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon::after {
  content: 'add_circle' !important; /* name of the material icon */
  font-family: 'Material Icons' !important;
  font-feature-settings: 'liga' 1;
}

【讨论】：

非常感谢。
@TeddySterne 你也可以为我们回答这个stackoverflow.com/questions/53394497/… 吗？

【解决方案2】：

要回答问题的第二部分，您可以通过将<ng-template matStepLabel> 的内容包装到具有matTooltip 属性的div 中来轻松显示工具提示。这个demo 显示了一个示例。

【讨论】：

感谢您的回答。我在演示中找不到解决方案或任何建议。
对不起，我忘了分叉 sn-p，你现在应该可以看到工具提示了
我想在鼠标悬停在索引而不是标签上时显示工具提示:)

【解决方案3】：

我认为这可能适合你。

<ng-template matStepLabel>
    <span matTooltip="Fill out your name">Fill out your name</span>
</ng-template>

【讨论】：

【解决方案4】：

我无法让上面选择的答案正常工作，但对于图标，我确实得到了其他 SO 答案以成功工作。我没有测试文字，只有图标。

Change step number to a mat-icon in an Angular Material Stepper

虽然我的答案还需要我锻炼如何导入提供的声明（未包含在答案中）。

import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

我还在 Stackblitz 中找到了一个不错的演示：

https://stackblitz.com/angular/maxbjapeayr?file=app/stepper-states-example.ts

【讨论】：