Angular定时器因组件频繁销毁出现闪烁问题如何解决

1. 阻止子组件不必要的销毁重建（核心解决方法） #

子组件每5秒重建的核心原因是*ngFor循环渲染子组件时默认用引用匹配判断节点是否需要更新，父组件全量替换从后端拉取的数组时，哪怕成员数据完全一致，引用变化也会触发所有子组件销毁重建，导致timer重置闪烁。
添加trackBy指定唯一标识追踪子项即可避免无意义的重建：
首先修改循环渲染app-team-firefighter的模板代码：

<ng-container *ngFor="let firefighter of teamData; trackBy: trackByFirefighterId">
  <app-team-firefighter
    [firefighter]="firefighter"
    [longestAlarm]="firefighter.calculatedLongestAlarm"
  ></app-team-firefighter>
</ng-container>

在对应ts文件中添加trackBy方法：

// 入参的firefighter类型替换为你实际的团队成员类型
trackByFirefighterId(index: number, firefighter: any): number | string {
  return firefighter.id; // 用成员唯一ID作为追踪标识，只要ID不变就不会重建子组件
}

2. 修复模板方法调用引发的不必要更新 #

你当前在模板中直接调用getTheLongestFirefighterAlarm(firefighter)传参，Angular每次变更检测都会执行该方法，如果方法返回的是新对象引用，哪怕值完全一致也会触发子组件ngOnChanges执行，引发不必要的定时器重置。
修改为拿到后端数据后预先计算所有成员的longestAlarm，存在成员属性中，模板直接传预计算的值即可：

// 父组件拿到后端返回的team数据后执行
this.team = res.data.map(firefighter => {
  return {
    ...firefighter,
    calculatedLongestAlarm: this.getTheLongestFirefighterAlarm(firefighter)
  }
})

3. 修复子组件定时器的内存泄漏与重复订阅问题 #

你当前在ngOnChanges中每次触发都新建一个interval订阅，没有销毁旧订阅，会出现多个订阅同时给timer赋值的冲突，也会造成内存泄漏。修改子组件代码如下：

import { Subject, takeUntil, switchMap, interval, map } from 'rxjs';
import { SimpleChanges } from '@angular/core';

// 类内部代码
private destroy$ = new Subject<void>();
private alarmUpdate$ = new Subject<any>(); // 泛型替换为你longestAlarm的实际类型

ngOnInit(): void {
  // 监听告警数据变化，切换定时器，自动销毁旧定时器
  this.alarmUpdate$.pipe(
    takeUntil(this.destroy$),
    switchMap(alarm => interval(1000).pipe(
      map(count => this.format(count + alarm.duration))
    ))
  ).subscribe(time => {
    this.timer = time;
  })
}

ngOnChanges(changes: SimpleChanges): void {
  // 只有longestAlarm真的发生变化时才更新定时器
  if (changes.longestAlarm?.currentValue) {
    this.alarmUpdate$.next(changes.longestAlarm.currentValue);
  }
}

ngOnDestroy(): void {
  // 组件销毁时清空所有订阅
  this.destroy$.next();
  this.destroy$.complete();
}

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