Angular 计时器因组件销毁而闪烁

Question

我有一个父组件，我从 BE 获取数据并将数据传递给子组件：

<app-team-tile [teamData]="team" (openNotes)="openNotes($event)"></app-team-tile>

teamData 表示团队成员的集合。在 teamTile 组件中，我将数据传递给下一个子组件：

<app-team-firefighter
   [firefighter]="firefighter"
   [longestAlarm]="getTheLongestFirefighterAlarm(firefighter)"
 ></app-team-firefighter>

longestAlarm 是returns 向子组件发出警报的方法。在 app-team-firefighter 组件中，我在 ngOnChanges 方法中有一个计时器：

 ngOnChanges(): void {
    if (this.longestAlarm) {
      interval(1000).pipe(
        map((count: any) => this.format(count + this.longestAlarm.duration))
      ).subscribe((time: string) => {
        this.timer = time;
      });
    }
  }

在模板中我显示了 this.timer 值，但它每 5 秒闪烁一次，因为我每 5 秒从 BE 获取数据，而且我知道当我从 BE 在父项中获取数据时，子项破坏。我该怎么做才能消除这种闪烁。提前致谢！

Answer 1

为什么要在 ngOnChanges 中执行此操作 -> 每次输入值更改时都会调用此生命周期挂钩。但是您没有使用这些更改值，因此您应该将订阅移至 ngOnInit.

如果您每 5 秒更改一次输入，则每次该方法运行时都会创建一个新订阅！（可能导致你的闪烁）。你也没有从我所看到的清理这些，所以你只是每 5 秒进行一次重复订阅，这将导致内存泄漏。

您将要取消订阅！（我没有在下面包括这个）

ngOnInit() {
    interval(1000).pipe(
         filter(_ => !!this.longestAlarm),
         map((count: any) => this.format(count + this.longestAlarm.duration))
     ).subscribe((time: string) => {
         this.timer = time;
     });
}

Angular 计时器因组件销毁而闪烁

Angular timer is flickering because of the component destroy

javascript

timer

count

typescript

angular