MatTable动态列显隐时如何避免列组件重复创建？

我的mat-table中，启用筛选功能的列的表头内嵌了一个筛选组件，支持数字、文本、日期、选择等多类型筛选的UI与逻辑。但遇到以下问题：

• 隐藏/显示动态列（如按钮列）时，其余列的筛选组件会被重新渲染，导致筛选数据直接重置。
• 无法在组件外持久化筛选数据：筛选禁用和组件重渲染都会触发ngOnDestroy，没法区分何时该保留并复用数据、何时该清理数据。
• 希望找到方法，避免动态列显隐前后都存在的列被重复创建（最小复现示例中要求列表头的计数器在首次加载后不再递增）。

1. 用trackBy控制列的渲染逻辑 #

在mat-table的列循环中添加trackBy函数，Angular会基于唯一标识判断列是否需要重新创建，彻底避免无意义的重渲染：

// 组件内定义trackBy函数
trackColumn(index: number, column: any): string {
  return column.id; // 用列的唯一ID作为追踪标识
}

模板中对应修改：

<ng-container *ngFor="let column of displayedColumns; trackBy: trackColumn">
  <mat-header-cell *matHeaderCellDef>
    <app-filter-component [column]="column"></app-filter-component>
  </mat-header-cell>
  <mat-cell *matCellDef="let element">{{ element[column.id] }}</mat-cell>
</ng-container>

2. 外置筛选状态管理 #

把筛选数据从组件内部迁移到全局服务或父组件中，彻底摆脱组件销毁丢失数据的问题：

• 创建一个筛选状态服务，用列ID作为键存储各列的筛选条件。
• 筛选组件初始化时从服务读取对应列的历史筛选数据，组件内的筛选操作实时同步回服务。
• 即使组件被销毁，服务中的数据仍会保留，组件重新渲染时直接复用。

3. 区分ngOnDestroy的触发场景 #

在筛选组件中通过监听父组件的列显隐事件，或者注入ViewContainerRef判断销毁原因：

• 父组件维护列的显隐状态，当列只是被隐藏而非从列集合中移除时，通知筛选组件保留状态；只有当列真正被删除时，才清理服务中的对应数据。

4. 避免直接替换displayedColumns数组 #

不要直接给displayedColumns赋值新数组，而是通过修改原数组的方式更新列集合，Angular变更检测会识别数组内部变化，减少重渲染触发：

// 错误方式：直接替换数组
this.displayedColumns = [...this.displayedColumns.filter(col => col !== 'actions')];
// 正确方式：修改原数组
const actionColIndex = this.displayedColumns.indexOf('actions');
if (actionColIndex !== -1) {
  this.displayedColumns.splice(actionColIndex, 1);
}

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