Angular Material 15中mat-tab-label添加关闭按钮的事件问题求解

问题根源在于两点：点击按钮时事件冒泡触发了标签页切换，以及按钮缺少悬停提示。以下是具体解决步骤：

1. 阻止事件冒泡，确保点击关闭按钮不触发标签切换 #

在按钮的click事件中添加$event.stopPropagation()，阻止事件向上传递到mat-tab标签元素，这样点击按钮只会执行关闭逻辑，不会触发标签页切换。

修改后的模板代码片段：

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs; let index = index">
    <ng-template mat-tab-label>
      {{index}}
      <button (click)="removeTab(index); $event.stopPropagation()" mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>
    </ng-template>
    <!-- 标签页内容 -->
  </mat-tab>
</mat-tab-group>

2. 添加鼠标悬停提示 #

使用Angular Material的matTooltip指令为按钮添加悬停提示，首先在你的模块中导入MatTooltipModule：

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

@NgModule({
  imports: [
    // 其他已导入模块
    MatTooltipModule
  ]
})
export class YourModule { }

然后在按钮上添加matTooltip属性：

<button (click)="removeTab(index); $event.stopPropagation()" mat-icon-button matTooltip="关闭标签页">
  <mat-icon>close</mat-icon>
</button>

3. 可选：用trackBy避免索引混乱（推荐） #

当通过splice删除标签后，*ngFor的索引可能出现错位，建议添加trackBy函数确保Angular正确跟踪每个标签：

组件中添加trackBy函数：

trackTabIndex(index: number, tab: any): number {
  return index; // 如果tab有唯一ID，返回tab.id会更可靠
}

模板中更新*ngFor：

<mat-tab *ngFor="let tab of tabs; let index = index; trackBy: trackTabIndex">

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