在 Angular-Material 15 中向 mat-tab-label 添加关闭按钮

Question

您好，我正在使用 Angular 材料编写 Angular 15 应用程序。

我用的是新的mat-tab（不是旧的）组件在我的页面中创建选项卡，并且我希望在选项卡标题中有一个关闭按钮。

所以在我创建的组件中removeTab函数：

removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

在模板中我做了以下操作：

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs; let index = index">
    <ng-template mat-tab-label>
      {{index}}
      <button (click)="removeTab(index)" mat-icon-button><mat-icon>close</mat-icon></button>
    </ng-template>
...

问题是，当我将鼠标悬停在关闭按钮上时，它不显示它是可单击的，当我单击它时，只需单击选项卡本身，事件不会传播到关闭按钮。

我该如何解决这样的事情？

Answer 1

在 Can't click button in tab header/label in Angular 15 中找到了答案

我需要pointer-events:auto向按钮添加样式，然后使用，$event.stopPropagation()这样如果我在关注其他选项卡时关闭它，它就不会移动到不同的选项卡。

所以按钮代码现在是：

  <button style="pointer-events: auto"  (click)="removeTab(index);$event.stopPropagation()" mat-icon-button><mat-icon>close</mat-icon></button>