角度材料 v15：无法单击垫选项卡内的图标答案

【问题标题】：Angular material v15 : Not able to click on icon inside mat tab角度材料 v15：无法单击垫选项卡内的图标
【发布时间】：2022-12-07 16:45:12
【问题描述】：

我在mat-tab > mat-tab-label 内的图标上添加了一个(click) 处理程序

但问题是当我点击mat-icon时它没有被触发

Stackblitz

代码：

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third">
    <ng-template mat-tab-label>
      <mat-icon (click)="alertRef()" class="example-tab-icon">delete</mat-icon>
      Third
    </ng-template>
  </mat-tab>
</mat-tab-group>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在您的 mat-tab-group 的每个选项卡中，默认情况下都有一个类为 mdc-tab__content 的元素，该元素具有一个 pointer-events: none 属性。您可以轻松地定位此元素并改用 pointer-events: all。

是这样的：

（在你的 SCSS 文件中）

:host {
   ::ng-deep {
     .mat-mdc-tab-group .mat-mdc-tab .mdc-tab__content { pointer-events: all; }
   }
}

【讨论】：

【解决方案2】：

Angular 15 已禁用指针事件，覆盖指针事件属性将允许点击事件传播

.allow-mat-pointer-event ::ng-deep .mdc-tab .mdc-tab__content{
  pointer-events: all;
}

<mat-tab-group class="allow-mat-pointer-event">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third">
    <ng-template mat-tab-label>
      <mat-icon (click)="alertRef()" class="example-tab-icon">delete</mat-icon>
      Third
    </ng-template>
  </mat-tab>
</mat-tab-group>

【讨论】：