mat-tab绑定click事件不生效 点击后如何触发自定义函数

直接在<mat-tab>标签上绑定(click)事件不生效，是因为mat-tab是Angular Material封装的抽象组件，本身不会直接渲染为可响应点击的DOM节点，绑定的事件没有挂载到用户实际点击的标签头DOM元素上，自然无法触发。

根据业务场景选下面任意一种写法即可：

方案1：用标签组自带的选中变化事件（官方推荐） #

这是最稳妥的原生支持写法，当用户切换选中标签时会触发事件，判断选中的是目标标签时执行自定义函数即可。
模板代码：

<mat-tab-group (selectedTabChange)="handleTabSwitch($event)">
  <mat-tab label="Tools">
    <!-- Tools标签对应的内容 -->
  </mat-tab>
  <!-- 其他mat-tab标签 -->
</mat-tab-group>

组件类代码：

import { MatTabChangeEvent } from '@angular/material/tabs';

// 自定义的目标函数
aaa() {
  console.log('mat-tab')
}

handleTabSwitch(event: MatTabChangeEvent) {
  // 两种判断方式选一种即可
  // 1. 按标签索引判断，索引从0开始，对应mat-tab的书写顺序
  // if (event.index === 0) {}
  // 2. 按标签文本判断，不受标签顺序调整影响
  if (event.tab.textLabel === 'Tools') {
    this.aaa()
  }
}

方案2：自定义标签头模板直接绑定事件 #

如果需要点击已经处于选中状态的标签也能触发函数（上面的selectedTabChange在点已选中标签时不会触发），可以自定义标签头内容，直接在头内容上绑定点击事件。
模板代码：

<mat-tab>
  <!-- 自定义标签头，替换原来的label属性写法 -->
  <ng-template mat-tab-label>
    <div (click)="aaa()" style="width: 100%; height: 100%;">
      Tools
    </div>
  </ng-template>
  <!-- Tools标签对应的内容 -->
</mat-tab>

*注意：用这个写法的时候不要给<mat-tab>加label="Tools"属性，避免标签头重复渲染。内层div加全宽全高样式是为了让整个标签头区域都能响应点击，不会出现只有点文字才触发的问题。

不要通过原生DOM查询的方式给mat-tab渲染后的节点硬绑事件，这种写法容易出现内存泄漏、Angular变更检测不触发的问题，优先用上面两种组件原生支持的方式实现。

内容的提问来源于stack exchange，提问作者das