Angular mat-tab点击标签触发跳转方法及tooltip失效问题求助

问题原因解析 #

• 点击事件失效：mat-tab是Angular Material的封装组件，本身不会直接响应(click)事件——实际渲染的标签是mat-tab-group内部的mat-tab-label元素，直接在mat-tab上绑定点击事件无法触发。
• Tooltip不工作：你使用了原生tooltip属性，但Angular Material的提示框需要用官方提供的matTooltip指令，原生属性不被组件识别。

解决方案 #

方法一：监听Tab切换事件（推荐） #

通过mat-tab-group的selectedTabChange事件判断选中的目标Tab，再执行avaJaak()方法，同时用matTooltip实现提示功能。

修改后的模板代码：

<mat-tab-group dynamicHeight [ngSwitch]="esileheTuup" (selectedTabChange)="onTabChange($event)">
  <!-- 原有4个Tab代码保持不变 -->
  
  <mat-tab label="Statistika1" 
           matTooltip="Siia vajutades suunatakse teid Justiitssüsteemi andme- ja analüüsikeskkonda (JAAK)">
    <div>
      <!-- 若无需显示Tab内容，此处可留空 -->
    </div>
  </mat-tab>
</ng-container>

组件类中添加事件处理逻辑：

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

// ...

onTabChange(event: MatTabChangeEvent) {
  // 通过标签文本判断是否为目标Tab，也可通过索引判断（如event.index === 4）
  if (event.tab.textLabel === 'Statistika1') {
    this.avaJaak();
    // 若不需要切换到该Tab，可主动切回之前的Tab：
    // event.source.selectedIndex = 之前的Tab索引;
  }
}

avaJaak() {
  // 实现打开链接逻辑，示例：
  window.open('你的目标链接地址', '_blank');
}

方法二：自定义Tab标签模板 #

直接自定义mat-tab的标签内容，在标签元素上绑定点击事件和matTooltip，可按需阻止Tab切换行为。

模板代码示例：

<mat-tab>
  <ng-template mat-tab-label>
    <span (click)="avaJaak(); $event.stopPropagation()" 
          matTooltip="Siia vajutades suunatakse teid Justiitssüsteemi andme- ja analüüsikeskkonda (JAAK)">
      Statistika1
    </span>
  </ng-template>
  <div>
    <!-- 可选：无需内容则留空 -->
  </div>
</mat-tab>

• $event.stopPropagation()：阻止点击事件冒泡到Tab组件，避免触发Tab切换（若仅需点击标签跳转、不需要显示Tab内容时使用）；若需要切换Tab后再跳转，可删除该语句。

必要配置检查 #

确保组件所属模块已导入相关Material模块，否则指令无法生效：

import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    // ...其他模块
    MatTabsModule,
    MatTooltipModule
  ]
})
export class YourModule { }

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