Angular嵌套mat-tab-group切换父标签后子标签渲染异常

我之前也碰到过一模一样的嵌套mat-tab-group搭配表格的渲染坑！这种情况本质是Angular Material的Tab组件在非活动状态下会做惰性加载或者暂时移除视图容器，当你从其他父Tab切回来时，子Tab的变更检测没被正确触发，导致表格内容卡着不渲染，得反复切几次子Tab才能强制触发更新。

问题根源拆解 #

当你切换到别的父Tab（比如View M2 - 2）时，原来的父Tab里的子mat-tab-group所在的视图会被Angular标记为非活动状态，相关组件的变更检测会暂停。等你切回原父Tab时，子Tab的视图虽然被重新激活，但表格的数据绑定没及时触发更新，或者子Tab的选中状态没同步好，就导致内容“消失”了，得多次切换子Tab来逼Angular检测到变化。

亲测有效的解决方案 #

方案1：绑定子Tab选中索引+手动触发变更检测 #

在组件里维护子Tab的选中索引，监听父Tab的切换事件，切回目标父Tab时手动触发变更检测，确保子Tab内容重新渲染：

1. 给子mat-tab-group绑定selectedIndex：

<mat-tab-group [selectedIndex]="childTabActiveIndex">
  <mat-tab label="M3 32 B">
    <table mat-table [dataSource]="m3TableData">
      <!-- 你的表格列定义 -->
    </table>
  </mat-tab>
</mat-tab-group>

2. 组件类里加属性和事件处理，用ChangeDetectorRef触发变更检测：

import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  childTabActiveIndex = 0;
  @ViewChild('parentTabContainer') parentTabGroup!: MatTabGroup;

  constructor(private cdr: ChangeDetectorRef) {}

  handleParentTabSwitch(event: any) {
    // 假设你要恢复的父Tab索引是0，根据实际情况调整
    if (event.index === 0) {
      this.childTabActiveIndex = 0;
      // 手动触发变更检测，强制Angular更新视图
      this.cdr.detectChanges();
    }
  }
}

然后给父mat-tab-group绑定切换事件：

<mat-tab-group (selectedTabChange)="handleParentTabSwitch($event)" #parentTabContainer>
  <!-- 父Tab的内容 -->
</mat-tab-group>

方案2：用*ngIf强制子Tab视图重新初始化 #

通过*ngIf控制子mat-tab-group的渲染时机，只有当父Tab激活时才渲染子Tab组件，这样每次切回都是全新的视图，不会有缓存的问题：

<mat-tab-group (selectedTabChange)="handleParentTabSwitch($event)">
  <mat-tab label="View M2">
    <!-- 只有父Tab激活时才渲染子Tab组 -->
    <div *ngIf="isTargetParentTabActive">
      <mat-tab-group>
        <mat-tab label="M3 32 B">
          <table mat-table [dataSource]="m3TableData">
            <!-- 表格列定义 -->
          </table>
        </mat-tab>
      </mat-tab-group>
    </div>
  </mat-tab>
  <mat-tab label="View M2 - 2">
    <!-- 其他父Tab内容 -->
  </mat-tab>
</mat-tab-group>

组件类里维护激活状态：

isTargetParentTabActive = true;

handleParentTabSwitch(event: any) {
  // 对应目标父Tab的索引，自己调整
  this.isTargetParentTabActive = event.index === 0;
}

方案3：把表格数据源改成可观察对象 #

如果你的表格用的是普通数组当数据源，切换Tab时Angular可能检测不到变化。换成BehaviorSubject包装数据源，配合async管道订阅，确保数据变化能及时触发视图更新：

import { BehaviorSubject } from 'rxjs';

// 组件类里定义数据源
private m3DataSubject = new BehaviorSubject<any[]>([]);
m3TableData$ = this.m3DataSubject.asObservable();

// 更新数据的时候调用这个方法
updateM3Data(newData: any[]) {
  this.m3DataSubject.next(newData);
}

模板里用async管道：

<table mat-table [dataSource]="m3TableData$ | async">
  <!-- 表格列定义 -->
</table>

验证修复效果 #

按你之前的复现步骤走一遍：

1. 打开任意M1的展开面板，看到父Tab和子Tab
2. 切换到子Tab（M3 32 B）
3. 切换到父Tab（View M2 - 2）
4. 切回原父Tab，这时候子Tab的表格应该直接正常显示，不用反复切换子Tab了

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