如何为 mat-step-header 绑定点击事件

Question

我想在用户点击时触发一个功能 mat-step-header

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

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

Answer 1

也许您现在已经解决了这个问题，但以防万一其他人正在寻求一个简单的解决方案：

只需将覆盖层<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%;
}

Answer 2

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

我们可以使用selectionChange()来获取所选选项卡的索引。根据文档

selectionChange() 是选定步骤发生变化时发出的事件

在你的 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上的一个工作示例。

Answer 3

您可以肯定地添加（单击）mat-step-header

<mat-step-header  class="mat-vertical-stepper-header"(click)="step.select()"