如何仅将mat-stepper用作展示组件并禁用选择功能？

期望效果 #

期望实现纯展示型垂直时间线，仅显示步骤序号与标签，无任何点击选择或交互切换的功能。

当前实现问题 #

当前使用Mat-Stepper的实现仍允许点击步骤进行切换，无法满足纯展示的需求。

当前代码 #

<mat-stepper orientation="vertical" >
<div *ngFor="let step of steps; let i = index;">
    <mat-step [completed]="false" [editable]="false" state="number">
        <ng-template matStepLabel>
            Step {{i}}
        </ng-template>
    </mat-step>
</div>

解决方案 #

当然可以将Mat-Stepper作为纯展示组件使用，只需通过以下几步禁用其选择功能：

• 禁用步骤交互
  给每个mat-step添加[disabled]="true"属性，同时给mat-stepper加上linear属性，彻底阻止步骤切换：

  <mat-stepper orientation="vertical" linear>
    <div *ngFor="let step of steps; let i = index;">
      <mat-step [completed]="false" [editable]="false" [disabled]="true" state="number">
        <ng-template matStepLabel>
          Step {{i}}
        </ng-template>
      </mat-step>
    </div>
  </mat-stepper>
  

• 移除点击事件（增强体验）
  通过CSS禁用步骤头部的点击响应，避免用户点击时出现无效反馈：

  .mat-step-header {
    pointer-events: none;
    cursor: default;
  }
  

• 自定义样式匹配期望效果（可选）
  如果需要调整样式以更贴近纯时间线的视觉效果，可以添加自定义CSS隐藏选中状态高亮：

  .mat-step-header.mat-step-selected {
    background-color: transparent;
    color: inherit;
  }
  

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