我想在用户点击mat-step-header时触发一个函数
我尝试在<ng-template matStepLabel><span (click)="triggerClick()">step 1</span></ng-template> 上添加(click)
但它仅在点击label 时触发，这对我的情况没有帮助。
我想在用户点击任何mat-step-header 时触发一个函数，如果它返回点击步骤的索引，这将很有帮助。
【问题讨论】：
也许你现在已经解决了，但以防万一其他人正在寻找一个简单的解决方案：
只需将覆盖<div> 放在步进器标题的顶部，如下所示：
<ng-template matStepLabel>
<div class="stepper-header-overlay" (click)="yourClickHandler()"></div>
some header text
</ng-template>
并设置标题样式：
.stepper-header-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
【讨论】：
selectionChange mat-stepper 的输出？否则，如果您使用键盘在步进器之间移动将不起作用
(selectionChange) 步进改变后触发的事件，要在 selectionChange 之前调用函数。
下面的代码对我有用，试试这个，它将适用于整个 mat-step 按钮（因为自定义 css，你也可以为 span 添加 css）。
如果你想在每个 mat-step 上调用函数，你必须为每个 mat-step 编写这个。
.mat-step-custom-click {
top: 0;
left: 0;
width: 130px; // as per your need
height: 72px; // as per your need
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
<mat-step>
<ng-template matStepLabel>
<div class="mat-step-custom-click" (click)="justTesting()">
<span>YOUR LABEL</span>
</div>
</ng-template>
</mat-step>
justTesting(){
if( stepper.selectedIndex ){ // you can check stepper index
let isValid = this.CheckValidations(yourData); // check your validations
stepper.selected.completed = isValid;
if( isValid ){
doSomething(); // call your function
}
}
}
【讨论】：
从文档看来，没有直接的方法可以做到这一点。唯一可以帮助您的eventEmitter 是selectionChange()。我们可以将它与(click) 事件一起使用，以在点击时获得selectedIndex。
我们可以使用selectionChange() 来获取选中标签的索引。根据docs
selectionChange()是所选步骤发生变化时发出的事件
在您的 HTML 中
<mat-horizontal-stepper #stepper (selectionChange)="setIndex($event)" (click)="triggerClick($event)">
<!-- Add your steppers here -->
</mat-horizontal-stepper>
在你的组件中
// Set default tab value to index so you don't get undefined if user clicks default tab initially
selectedIndex: number = 0;
setIndex(event) {
this.selectedIndex = event.selectedIndex;
}
triggerClick(event) {
console.log(`Selected tab index: ${this.selectedIndex}`);
}
这是StackBlitz 上的一个工作示例。
【讨论】：
mat-step-header时触发一个函数。上述解决方案无助于解决我的问题。
mat-step-header 时，它会返回所选mat-step-header 的索引。你的用例到底是什么？点击mat-step-header你想做什么？
step-header 我的函数应该触发时我需要一些东西。
在您的 component.ts 中：
@ViewChild('stepper', {static: false})
stepper: MatStepper;
constructor(
private elementRef: ElementRef,
) {}
ngAfterViewInit() {
this.elementRef.nativeElement.querySelectorAll('mat-step-header').forEach(item => {
item.addEventListener('click', event => {
const index = event.currentTarget.ariaPosInSet - 1;
});
});
}
我知道这并不优雅，但它确实有效。欢迎任何改进。
【讨论】：
您肯定可以在 mat-step-header 上添加（单击）
<mat-step-header class="mat-vertical-stepper-header"(click)="step.select()"
【讨论】：