如何将单击事件绑定为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></ng-template>上添加(click) 但是它仅在点击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 上的有效示例.

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