如何讓點擊 mat-tab 點擊？

Question

我有一個墊子標簽：

 <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元素沒有完整的選項卡可點擊區域，它用作內聯元素。

Answer 1

使用div而不是span並調整它以使用 css 填充容器

Answer 2

它從索引 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); 
}