如何不使用trackBy阻止Angular中*ngFor指令重渲染DOM？

问题描述 #

我以可观察字典作为数据源，通过ngComponentOutlet渲染组件，核心代码如下：

<ng-container
*ngFor="let data of dataDictionary$ | async | keyvalue">
<ng-container
  *ngComponentOutlet="
    componentMap[data.value.type];
    injector: this.createInjector(data.value)
  "></ng-container>
</ng-container>

遇到的问题：

• 部分子组件使用<mat-radio-group>和<mat-expansion-panel>，与单选按钮交互时，*ngFor会因变更检测触发重渲染，导致父、子组件状态重置；
• <mat-expansion-panel>无需交互，每秒都会自动触发重渲染。

推测原因：Angular Material组件会自行触发变更检测，不受父组件ChangeDetectionStrategy.OnPush控制，进而触发*ngFor重渲染。

尝试过的方案：

• 通常用trackBy控制*ngFor重渲染时机，但<ng-container>的*ngFor不支持该函数；
• 将外层<ng-container>替换为<div>后trackBy生效，但问题仍存在——即便trackBy始终返回相同值，含<mat-expansion-panel>的模板仍会整体重渲染。

疑问：使用trackBy时，ngForCheck仍会被变更检测触发吗？

解决方案 #

1. 缓存注入器避免实例重复创建 #

当前每次变更检测都会调用createInjector(data.value)生成新注入器，这会导致ngComponentOutlet认为组件需要重建，即便trackBy返回相同key。需通过缓存复用注入器：

// 组件类中添加缓存映射
private injectorCache = new Map<string, Injector>();

createInjector(data: any): Injector {
  const cacheKey = data.id; // 用数据的唯一标识作为缓存key
  if (!this.injectorCache.has(cacheKey)) {
    const injector = Injector.create({
      providers: [{ provide: 'ComponentData', useValue: data }],
      parent: this.injector
    });
    this.injectorCache.set(cacheKey, injector);
  }
  return this.injectorCache.get(cacheKey)!;
}

仅当数据新增时才创建新注入器，避免因注入器实例变化导致的组件重建。

2. 优化trackBy逻辑确保精准匹配 #

用<div>包裹后，trackBy需返回数据的唯一且稳定的标识，而非固定值：

<div *ngFor="let data of dataDictionary$ | async | keyvalue; trackBy: trackByFn">
  <ng-container
    *ngComponentOutlet="
      componentMap[data.value.type];
      injector: createInjector(data.value)
    "></ng-container>
</div>

trackByFn(index: number, item: KeyValue<string, any>): string {
  return item.key; // 用字典的key作为唯一标识，数据未变更时返回值不变
}

3. 隔离子组件变更检测 #

针对Angular Material组件的自动变更检测，可在子组件中手动控制检测时机：

// 子组件类
constructor(private cdr: ChangeDetectorRef) {}

// 仅在内部状态变更后手动触发检测
updateComponentState() {
  // 状态更新逻辑
  this.cdr.markForCheck();
}

同时给子组件设置ChangeDetectionStrategy.OnPush，减少不必要的检测触发。

关于ngForCheck的疑问 #

是的，trackBy只能避免组件的重建，但ngForCheck仍会在每次变更检测周期被触发——它会对比trackBy返回的标识，只有标识变化时才会销毁重建组件。但组件自身的变更检测仍会被父组件或Material组件的触发行为影响，因此需要结合注入器缓存和子组件检测控制的方案。

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