javascript - 直接向 mat-step 添加(点击)事件处理程序？

Question

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

我尝试在此演示中的第 2 步 中添加一个，但我没有看到记录的点击:

我尝试过的代码:

HTML:

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

TS:

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

Stackblitz Demo重现该行为。

相关的 Angular Material 问题

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

仅当第 1 步完成时才有效

Answer 1

您可以使用(selectionChange)父标签的事件为 mat-h​​orizo​​ntal-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>

TS 代码:

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

EDIT:

如果您希望每个步骤都可点击或可供用户使用，那么您必须删除 mat-h​​orizo​​ntal-stepper 的 linear 属性或将其设置为 假。

Documentation