Angular9中嵌套mat-tab-group子mat-tab默认未激活问题求助

环境 #

• Angular 版本：9.0.1
• Angular Material 版本：9.2.4

问题 #

切换至父Tab2后，其内部的子Tab1未被默认标记为激活状态。

代码示例 #

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">
      <mat-tab-group mat-align-tabs="start">
          <mat-tab label="Tab 1">sub tab 1 Content</mat-tab>
          <mat-tab label="Tab 2">sub tab 2 Content</mat-tab>
      </mat-tab-group>
  </mat-tab>
</mat-tab-group>

解决方法 #

方案1：直接绑定selectedIndex #

在子mat-tab-group上显式绑定selectedIndex属性并设置为0，强制默认选中第一个子Tab：

<mat-tab-group mat-align-tabs="start" [selectedIndex]="0">
    <mat-tab label="Tab 1">sub tab 1 Content</mat-tab>
    <mat-tab label="Tab 2">sub tab 2 Content</mat-tab>
</mat-tab-group>

方案2：结合父Tab切换事件触发 #

若方案1因Angular 9变更检测时机问题不生效，可通过监听父Tab的切换状态，手动控制子Tab的激活：

1. 组件类中添加变量：

parentActiveTabIndex = 0;

2. 修改模板代码：

<mat-tab-group mat-align-tabs="start" (selectedIndexChange)="parentActiveTabIndex = $event">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">
      <mat-tab-group mat-align-tabs="start" [selectedIndex]="parentActiveTabIndex === 1 ? 0 : null">
          <mat-tab label="Tab 1">sub tab 1 Content</mat-tab>
          <mat-tab label="Tab 2">sub tab 2 Content</mat-tab>
      </mat-tab-group>
  </mat-tab>
</mat-tab-group>

原理：当父Tab切换到索引1（即Tab2）时，强制子Tab组选中索引0的Tab，确保每次进入父Tab2时子Tab1都处于激活状态。

说明 #

Angular Material 9中，嵌套的tab-group在父Tab未激活时不会完全初始化，直接设置selectedIndex可能因初始化顺序问题失效。通过监听父Tab切换事件触发子Tab选中状态，能确保变更检测正确执行。

内容的提问来源于stack exchange，提问作者Jonathan Nieto