如何让点击mat-tab点击？

Question

我有一个垫子标签：

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

它不会发出单击事件。我尝试使用嵌入的span：

 <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元素没有完整的制表符可点击区域，它作为内联元素工作。

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

Answer 2

使用div代替span，并调整它以使用css填充容器。