Angular Material mat-tab组件点击跳转异常、内容不显示问题求助

问题根因 #

• 动态渲染mat-tab时未配置trackBy函数，当修改tab数组内的属性时，Angular默认会全量销毁重绘所有tab组件，原有选中索引失效，Material会自动选中第一个可交互tab，导致跳转异常
• 异步加载tab内容的逻辑与tab选中状态变更时机冲突，未等异步请求完成就触发了tab重绘，选中状态被重置
• mat-tab默认惰性加载机制与变更检测时机不匹配，tab被重绘销毁后再次激活时，已加载标记导致内容未重新渲染

修复方案 #

1. 配置ngFor的trackBy函数避免全量重绘 #

在组件类中声明trackBy方法，使用tab的唯一ID作为追踪标识，仅更新发生变化的tab项：

// 组件类代码
trackByTabId(index: number, tabItem: {id: number, [key:string]: any}): number {
  return tabItem.id;
}

模板中修改ngFor写法：

<mat-tab-group [(selectedIndex)]="selectedIndex">
  <mat-tab 
    *ngFor="let tab of tabs; trackBy: trackByTabId"
    [label]="tab.label"
  >
    <ng-template matTabContent>
      {{tab.content}}
    </ng-template>
  </mat-tab>
</mat-tab-group>

2. 调整异步加载逻辑匹配tab选中时机 #

点击未加载的tab时先保留当前选中状态，等接口请求完成后再切换到目标tab，同时手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

export class YourComponent {
  selectedIndex = 0;
  previousIndex = 0;
  tabs = [
    {id: 1, label: 'Tab-1', content: '', loaded: true},
    {id: 2, label: 'Tab-2', content: '', loaded: false},
    {id: 3, label: 'Tab-3', content: '', loaded: false},
  ]

  constructor(private cdr: ChangeDetectorRef, private yourApiService: YourApiService) {}

  onTabChange(index: number) {
    const targetTab = this.tabs[index];
    // 仅未加载过的tab需要请求数据
    if (!targetTab.loaded) {
      // 先回退到之前的选中状态，避免空白/跳转
      this.selectedIndex = this.previousIndex;
      this.yourApiService.getTabData(targetTab.id).subscribe(res => {
        // 只修改当前tab的属性，不替换整个tabs数组引用
        targetTab.content = res.data;
        targetTab.loaded = true;
        // 请求完成后再切换到目标tab
        this.selectedIndex = index;
        // 手动触发变更检测避免视图不更新
        this.cdr.markForCheck();
      })
    }
    this.previousIndex = this.selectedIndex;
  }
}

3. 修复内容不展示问题 #

如果修改后仍出现tab激活但无内容的情况，可以选择两种方案：

• 关闭mat-tab惰性加载：给ng-template matTabContent添加[lazyRender]="false"属性，初始化时就渲染所有tab内容
• 在tab激活事件中手动触发对应内容的变更检测，强制重渲染当前tab内容

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