如何让mat-step不可点击且不影响matTooltip功能？

方案：通过事件阻止实现不可点击，同时保留Tooltip #

直接在<mat-step>标签上绑定点击事件，阻止事件传播与默认行为，既不会触发步骤切换，又不影响内部Tooltip正常显示：

<mat-step (click)="$event.stopPropagation(); $event.preventDefault()">
  <ng-template matStepLabel>
    <div matTooltip="Tooltip content">End</div>
  </ng-template>
</mat-step>

原理说明 #

• $event.stopPropagation()会阻止点击事件向上冒泡到步骤组件的内置点击处理逻辑，$event.preventDefault()则直接阻止默认的步骤切换行为，两者结合实现“不可点击”的效果。
• Tooltip绑定在内部<div>元素上，鼠标悬停时的触发事件不受外层<mat-step>的点击阻止影响，因此Tooltip能正常显示。

为什么pointer-events: none不可行？ #

pointer-events: none会让元素完全不接收任何鼠标事件，包括Tooltip依赖的mouseenter/mouseleave事件，设置后Tooltip直接失效，不符合需求。

内容的提问来源于stack exchange，提问作者Melvin S Alex