Angular Material Stepper自定义步骤标识及悬浮提示设置咨询

Hey，我之前在使用Angular Material步进器时也碰到过这两个文档里没明确说明的问题，折腾了一番后找到了靠谱的解决方法，分享给你！

Angular Material的mat-step支持通过matStepHeader指令完全自定义步骤头部内容，直接替换默认的数字索引。具体做法很简单：在mat-step内部添加一个ng-template并标记matStepHeader，然后在模板里放你想要的任何内容——不管是纯文本、图标还是复杂的HTML结构。

举个实际的例子：

<mat-horizontal-stepper>
  <!-- 用图标+文本替换数字索引 -->
  <mat-step>
    <ng-template matStepHeader>
      <mat-icon>edit_note</mat-icon>
      <span>填写表单</span>
    </ng-template>
    <!-- 步骤内容 -->
    <p>这里是第一步的表单内容...</p>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>

  <!-- 用带样式的HTML替换索引 -->
  <mat-step>
    <ng-template matStepHeader>
      <span class="custom-step-badge" style="color: #2ecc71; font-weight: bold;">📋 审核</span>
    </ng-template>
    <!-- 步骤内容 -->
    <p>这里是审核环节的内容...</p>
    <button mat-button matStepperPrevious>上一步</button>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>
</mat-horizontal-stepper>

如果需要动态绑定HTML内容（比如从后端获取的富文本），记得用DomSanitizer处理避免XSS风险：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-custom-stepper',
  templateUrl: './custom-stepper.component.html'
})
export class CustomStepperComponent {
  dynamicStepLabel: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 安全处理HTML内容
    this.dynamicStepLabel = this.sanitizer.bypassSecurityTrustHtml(
      '<span style="color: #e74c3c; font-weight: bold;">⚠️ 待确认</span>'
    );
  }
}

然后在模板里绑定：

<mat-step>
  <ng-template matStepHeader>
    <span [innerHTML]="dynamicStepLabel"></span>
  </ng-template>
  <!-- 步骤内容 -->
</mat-step>

直接在mat-step标签上加matTooltip是不生效的，因为mat-step本身不是渲染到DOM的可见元素——实际的步骤头部是Material内部生成的.mat-step-header元素。

最稳妥且直观的方法是结合上面的自定义步骤头部模板，在模板的容器元素上添加matTooltip：

<mat-step>
  <ng-template matStepHeader>
    <!-- 在容器上添加tooltip，悬浮时显示提示 -->
    <div matTooltip="点击进入基本信息填写环节，需填写姓名、手机号">
      <mat-icon>person</mat-icon>
      <span>基本信息</span>
    </div>
  </ng-template>
  <!-- 步骤内容 -->
  <p>这里是基本信息表单...</p>
  <button mat-button matStepperNext>下一步</button>
</mat-step>

如果不想完全自定义步骤头部，只是想给默认数字索引加tooltip，也可以通过ViewChild获取MatStep实例，再找到它的header元素添加tooltip，但这种方法依赖Material的内部DOM结构，版本更新可能失效，所以更推荐自定义模板的方式。

内容的提问来源于stack exchange，提问作者Afsun Khammadli