如何为Angular Mat-Step附加自定义标识，以便在服务中识别当前步骤？

安全阿岳

2026-7-25

为Mat-Step添加自定义标识的最优方案

方法1：利用MatStep内置的`data`属性（最推荐）

Angular Material的MatStep组件原生提供了data输入属性，专门用于存储自定义关联数据，完美匹配你的需求：

模板中直接为mat-step绑定data属性，传入自定义标识：

<!-- component.html -->
<mat-stepper #stepper>
  <mat-step [data]="{ someId: 'step1' }">content1</mat-step>
  <mat-step [data]="{ someId: 'step2' }">content2</mat-step>
</mat-stepper>

在组件或服务中通过选中步骤的data属性获取标识：

// component.ts 或 外部服务文件
isFirstStep() {
  return this.stepper.selected?.data?.someId === "step1";
}

该方案无需额外封装组件，彻底避开了索引不稳定、id属性冲突、多ViewChild冗余的问题，完全支持动态插入步骤的场景。

方法2：自定义属性+类型断言（兼容旧版本）

如果你的Angular Material版本不支持data属性，可采用自定义属性配合类型断言的方式：

模板中添加自定义标识属性：

<!-- component.html -->
<mat-stepper #stepper>
  <mat-step someId="step1">content1</mat-step>
  <mat-step someId="step2">content2</mat-step>
</mat-stepper>

扩展MatStep类型或直接用类型断言访问自定义属性：

// component.ts 或 外部服务文件
interface MatStepWithCustomId extends MatStep {
  someId: string;
}

isFirstStep() {
  return (this.stepper.selected as MatStepWithCustomId).someId === "step1";
}

这种方式对模板改动极小，仅需补充类型定义即可，适合无法升级Material版本的场景。