如何实现mat-tab全区域点击触发？mat-tab click事件不触发求助

问题原因 #

直接给<mat-tab>绑定click事件不生效，是因为<mat-tab>是Angular Material封装的逻辑容器组件，不会直接渲染成真实DOM节点，绑定的事件无法挂载到实际可点击的tab标签元素上。

方案1：使用mat-tab-group的官方事件（更推荐） #

直接在父级<mat-tab-group>上绑定selectedTabChange事件，无需给每个子tab单独绑定，逻辑更统一：

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab *ngFor="let template of templateTypes">
    <ng-template mat-tab-label>
      {{ template.name }} ({{ template?.count }})
    </ng-template>
    <!-- tab内容区域 -->
  </mat-tab>
</mat-tab-group>

对应的TS代码：

// 可从@angular/material/tabs导入MatTabChangeEvent获取类型提示
import { MatTabChangeEvent } from '@angular/material/tabs';

// ...
onTabChange(event: MatTabChangeEvent) {
  const selectedTemplate = this.templateTypes[event.index];
  this.toggleSelectedTab(selectedTemplate.type);
}

这个方案是Angular Material官方推荐的tab切换监听方式，没有点击区域的问题，也符合组件的设计逻辑。

方案2：调整span样式覆盖整个tab区域 #

如果你需要保留单独给每个tab标签绑定点击事件的写法，只需要给span添加样式让它占满整个tab标签的可点击区域即可：

<mat-tab *ngFor="let template of templateTypes">
  <ng-template mat-tab-label>
    <span 
      class="tab-label-full"
      (click)="toggleSelectedTab(template.type)"
    >
      {{ template.name }} ({{ template?.count }})
    </span>
  </ng-template>
</mat-tab>

对应的CSS：

.tab-label-full {
  display: block;
  width: 100%;
  height: 100%;
  /* 保持和官方tab标签一致的内边距，避免样式错位 */
  padding: 12px 16px;
  cursor: pointer;
}

这样span就会覆盖整个tab标签的可点击区域，任意位置点击都能触发事件。

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