Angular material v15:无法点击mat选项卡内的图标

Question

我在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>

Answer 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; }
}
}