如何为 mat-step-header 绑定点击事件 [英] How to bind an click event for mat-step-header

问题描述

我想在用户点击mat-step-header

我已经尝试在 <ng-template matStepLabel><span (click)="triggerClick()">step 1</span><上添加 (click);/ng-template>但它仅在点击 label 时触发，这对我的情况没有帮助.

I've tried adding (click) on <ng-template matStepLabel><span (click)="triggerClick()">step 1</span></ng-template> but it's triggering only on the click of label which will not be helpful for my case.

我想在用户点击任何 mat-step-header 时触发一个函数，如果它返回点击步骤的索引，这将很有帮助.

I want to trigger a function when user click on any of the mat-step-header if it returns the index of clicked step it will be helpful.

推荐答案

从文档来看，似乎没有直接的方法可以做到这一点.唯一可以帮助您的 eventEmitter 是 selectionChange().我们可以将它与 (click) 事件一起使用，以在点击时获取 selectedIndex.

From the docs it doesn't look like there's a direct way to do this. The only eventEmitter that could help you would be selectionChange(). We can use this along with a (click) event to get the selectedIndex on click.

我们可以使用 selectionChange() 来获取所选标签的索引.根据文档

We can use selectionChange() to get the index of the selected tab. As per the docs

selectionchange()是当所选步骤更改时发出的事件

selectionChange() is the event emitted when the selected step has changed

在你的 HTML 中

<mat-horizontal-stepper #stepper (selectionChange)="setIndex($event)" (click)="triggerClick()">
  <!-- 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 的工作示例.

Here is a working example on StackBlitz.

这篇关于如何为 mat-step-header 绑定点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！