Angular Material：如何在指令中使用Tab组件的isActive属性

首先明确：Mat-Tab的isActive是只读实例属性，不能直接在模板中作为输入绑定（比如<mat-tab isActive>这种写法无效），需要通过Mat-Tab-Group的状态间接判断当前标签是否激活，进而控制子组件的disabledButton属性。

解决方案一：直接在模板中通过Tab Group的selectedIndex判断 #

利用mat-tab-group的模板变量和*ngFor的索引，直接在模板中对比当前标签的索引和选中索引，判断激活状态：

<mat-tab-group #tabGroup>        
    <div *ngFor="let elem of infosOnglet$ | async; let i = index">
        <mat-tab>
            <ng-template mat-tab-label>
               <!-- 根据需求调整逻辑：激活时按钮启用用 !==，激活时禁用用 === -->
               <app-export-menu [disabledButton]="tabGroup.selectedIndex !== i">
               </app-export-menu>
            </ng-template>
            <!-- 标签页内容区域 -->
        </mat-tab>
    </div>
</mat-tab-group>

解决方案二：在组件类中追踪激活标签（适合复杂逻辑） #

如果需要在组件中处理激活标签的额外逻辑，可以通过selectedTabChange事件监听标签切换：

1. 组件类中定义变量并实现事件处理方法：

import { MatTabChangeEvent } from '@angular/material/tabs';

// ...

activeTabIndex: number = 0;

onTabChange(event: MatTabChangeEvent): void {
  this.activeTabIndex = event.index;
}

2. 模板中绑定事件并使用变量判断：

<mat-tab-group (selectedTabChange)="onTabChange($event)">        
    <div *ngFor="let elem of infosOnglet$ | async; let i = index">
        <mat-tab>
            <ng-template mat-tab-label>
               <app-export-menu [disabledButton]="activeTabIndex !== i">
               </app-export-menu>
            </ng-template>
            <!-- 标签页内容区域 -->
        </mat-tab>
    </div>
</mat-tab-group>

关键说明 #

• 原代码中<mat-tab isActive>的写法错误，isActive是MatTab实例的只读属性，不能作为输入属性绑定；
• 两种方案的核心都是通过标签索引判断激活状态，你可以根据业务需求调整disabledButton的逻辑。

内容的提问来源于stack exchange，提问作者maxime Lassort