如何实现点击Angular Material Stepper整步容器跳转对应组件

方案1：使用mat-stepper原生事件（最优雅） #

直接监听步进器的selectionChange事件，无需给单个步骤绑定点击事件，代码可维护性更高：

第一步：修改TS代码 #

合并跳转逻辑，不用写多个独立跳转函数：

import { StepperSelectionEvent } from '@angular/material/stepper';
// 类内部代码
// 按步骤顺序定义对应路由
stepRouteMap = ['/component1', '/component2'];

onStepSelected(event: StepperSelectionEvent) {
  this.route.navigate([this.stepRouteMap[event.selectedIndex]]);
}

第二步：修改HTML模板 #

直接在步进器根节点绑定事件，删除原有p标签上的点击绑定：

<mat-horizontal-stepper (selectionChange)="onStepSelected($event)">
    <mat-step>
        <ng-template matStepLabel>
            <p>Component One</p>
        </ng-template>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>
            <p>Component Two</p>
        </ng-template>
    </mat-step>
</mat-horizontal-stepper>

这种方案只要点击步骤头部任意区域触发步骤切换，就会自动执行路由跳转，完全符合点击整步容器生效的需求。

方案2：撑满标签点击区域（适合需要保留原有步骤逻辑的场景） #

如果不想用步进器的切换事件，只需要让原有的点击事件覆盖整个步骤头部，只需要给标签容器加样式占满整个头部区域即可：

第一步：加全局样式或者组件样式 #

.full-width-label {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 0; /* 适配Material默认的头部内边距，可自行调整 */
  cursor: pointer;
}

第二步：修改标签绑定 #

<mat-horizontal-stepper>
    <mat-step>
        <ng-template matStepLabel>
            <p class="full-width-label" (click)="goto_component1()">Component One</p>
        </ng-template>
        </mat-step>
    <mat-step>
        <ng-template matStepLabel>
            <p class="full-width-label" (click)="goto_component2()">Component Two</p>
        </ng-template>
    </mat-step>
</mat-horizontal-stepper>

补充说明 #

如果需要点击步骤时不触发步进器默认的步骤状态切换（比如不需要校验前置步骤直接跳转），可以给mat-step添加[completed]="false" [editable]="true"属性，或者全局给mat-horizontal-stepper加linear="false"关闭线性校验逻辑。

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