如何使单击 mat-tab 单击？答案

【问题标题】：How to make click mat-tab click?如何使单击 mat-tab 单击？
【发布时间】：2021-11-15 08:49:38
【问题描述】：

我有一个垫子标签：

 <mat-tab *ngFor="let template of templateTypes" (click)="toggleSelectedTab(template.type)"></mat-tab>

它不会发出点击事件。我尝试使用嵌入跨度：

 <mat-tab *ngFor="let template of templateTypes" (click)="toggleSelectedTab(template.type)">
            <ng-template mat-tab-label>
                <span (click)="toggleSelectedTab(template.type)"> {{ template.name }} ({{ template?.count }})</span>
            </ng-template>
</mat-tab>

但span 元素没有完整的选项卡可点击区域，它作为内联元素工作。

【问题讨论】：

标签： angular angular-material mat-tab

【解决方案1】：

它从索引 0 开始到您创建的选项卡数。

在你的 html 中

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
     <mat-tab *ngFor="let template of templateTypes" 
              (click)="toggleSelectedTab(template.type)"></mat-tab>
</mat-tab-group>

在组件中使用此代码

tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
    console.log('tabChangeEvent => ', tabChangeEvent); 
    console.log('index => ', tabChangeEvent.index); 
}

【讨论】：

【解决方案2】：

使用 div 代替 span 并使用 css 对其进行调整以填充容器

【讨论】：

我试过这个：mat-tab div { height: 100%; width: 100%; position: absolute; display: flex; align-items: center; justify-content: center; }