直接向 mat-step 添加（点击）事件处理程序？

Question

是否可以直接向mat-step元素添加单击事件处理程序？

我尝试step 2在这个演示中添加一个，但我没有看到点击记录：

我试过的代码：

HTML：

<mat-step label="Step 2" (click)="click()" optional>
 // Other stuff
</mat-step>

TS：

click() {
  console.log("CLICKED STEP 2")
}

Stackblitz Demo 重现该行为。

相关角度材料问题

https://github.com/angular/components/issues/18080

它仅在第 1 步完成时才有效

Answer 1

您可以将(selectionChange)事件用于父标记，即mat-horizontal-stepper.

HTML：

<mat-horizontal-stepper linear (selectionChange)="selectionChange($event)">
    <mat-step label="Step 1" [completed]="step1Complete">
        <h4>Step 1</h4>
        <button (click)="toggleStep1Complete()" mat-flat-button color="primary">{{ step1Complete === true ? "Toggle:Complete" : "Toggle:Incomplete"}}
</button>
        <div>
            <button mat-button matStepperNext>Next</button>
        </div>
    </mat-step>
    <mat-step label="Step 2" optional>
        <p>Step 2</p>
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>
    </mat-step>
    <mat-step label="Step 3">
        <p>Step 3</p>
    </mat-step>
</mat-horizontal-stepper>

代码：

import { StepperSelectionEvent } from '@angular/cdk/stepper'; -- Better to use to get an intellisense about properties and available methods

selectionChange(event: StepperSelectionEvent) {
  console.log(event.selectedStep.label);
  let stepLabel = event.selectedStep.label;
  if (stepLabel == "Step 2") {
    console.log("CLICKED STEP 2");
  }
}

A working demo

编辑：

如果您希望每个步骤都应该是可点击的或可供用户使用，那么您必须删除linear属性mat-horizontal-stepper或将其设置为false.

Documentation