Angular中nz-calendar的NG0956警告解决：如何为nzDateCell配置trackBy？

问题本质 #

NG0956警告的核心原因是Angular默认的身份追踪机制无法识别日历单元格的稳定性，每次点击日期后，nzDateCell对应的DOM集合被完全重建，引发不必要的组件、指令销毁与重建，造成性能损耗。

用trackBy优化的具体实现 #

1. 定义trackBy函数 #

在你的组件类中添加一个基于日期唯一标识的追踪函数，用时间戳作为判断依据：

trackByDate(index: number, date: Date): number {
  return date.getTime(); // 时间戳是每个日期的唯一稳定标识
}

2. 结合变更检测策略实现优化 #

由于nz-calendar没有直接暴露trackBy输入属性，你需要通过变更检测策略+模板优化来实现：

• 给组件开启OnPush变更检测策略，减少不必要的检测触发：

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'your-calendar-component',
  templateUrl: './your-calendar.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourCalendarComponent {
  trackByDate(index: number, date: Date): number {
    return date.getTime();
  }
}

• 如果自定义nzDateCell时涉及内部循环渲染内容，直接在*ngFor上绑定trackBy：

<nz-calendar>
  <ng-template #nzDateCell let-date>
    <div *ngFor="let item of relatedData; trackBy: trackByDate">
      {{ item.label }}
    </div>
    <span class="date-text">{{ date | date:'dd' }}</span>
  </ng-template>
</nz-calendar>

其他优化手段 #

• 禁止模板内动态函数调用：不要在nzDateCell模板中使用{{ getDateExtraInfo(date) }}这类函数，每次变更检测都会执行并返回新引用，触发重建。把逻辑移到组件类中用属性缓存，或使用纯管道处理。
• 升级ng-zorro版本：确保使用最新版的ng-zorro-antd，官方后续版本可能已修复这类集合重建的性能问题。
• 简化单元格模板：尽量减少nzDateCell模板内的复杂结构与绑定，降低重建带来的性能开销。

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