是否可以直接向 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 步完成时才有效
最佳答案
您可以使用(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>
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");
}
}
EDIT:
如果您希望每个步骤都可点击或可供用户使用,那么您必须删除 mat-horizontal-stepper
的 linear
属性或将其设置为 假
。
关于javascript - 直接向 mat-step 添加(点击)事件处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59549423/