如何点击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); 
}

如何点击mat-tab点击？

How to make click mat-tab click?

angular-material

angular

mat-tab