Angular生命周期钩子中使用RxJS timer操作符致应用无法加载

在ngOnChanges钩子中使用RxJS的timer操作符设置超时后，浏览器无法加载应用；注释该超时代码后应用可正常运行，尝试其他钩子也出现相同问题，控制台无任何报错，仅浏览器加载动画持续转动。

我正在制作一个带计时器的轮播组件，期望计时器结束时加载下一张幻灯片，原本想通过ngOnChanges钩子在组件首次加载时设置超时。

代码片段 #

$currentEventTimer$?: Subscription;

currentEvent: SliderEvent = {
    id: '1',
    type: 'VIDEO',
    title: 'concerts next month',
    description: "Don't miss your favorite artist's concert",
    file: '',
    time: 5000
  };

next(): void {
  if (this.currentEventIndex != this.events.length - 1)
    this.currentEvent = this.events[++this.currentEventIndex];
  else this.currentEvent = this.events[(this.currentEventIndex = 0)];

  this.$currentEventTimer$?.unsubscribe();

  if (this.currentEvent.time)
    this.$currentEventTimer$ = timer(this.currentEvent.time).subscribe(() =>
      this.next()
    );
}

ngOnChanges(changes: SimpleChanges): void {
  this.$currentEventTimer$?.unsubscribe();

  if (this.currentEvent.time)
    this.$currentEventTimer$ = timer(this.currentEvent.time).subscribe(() =>
      this.next()
    );
}

环境信息 #

Angular CLI: 17.1.2  
Node: 20.10.0  
Package Manager: npm 10.5.0  
OS: linux x64  
Browser: Chrome 121.0.6167.139  

Angular: 17.1.2  
... animations, cli, common, compiler, compiler-cli, core, forms  
... platform-browser, platform-browser-dynamic, platform-server  
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.2  
@angular-devkit/build-angular   17.1.2  
@angular-devkit/core            17.1.2  
@angular-devkit/schematics      17.1.2  
@schematics/angular             17.1.2  
rxjs                            7.8.1  
typescript                      5.2.2  
zone.js                         0.14.2  

问题原因与解决方案 #

原因分析 #

核心问题是无限循环触发变更检测：ngOnChanges钩子启动timer后，timer触发next()方法修改currentEvent，而currentEvent的变更又会再次触发ngOnChanges，形成闭环循环，导致Angular一直处于变更检测状态，浏览器无限加载。

修复方案 #

1. 改用ngOnInit初始化首次计时器（仅在组件初始化时执行一次，避免重复触发）
2. 新增ngOnDestroy钩子取消订阅，防止内存泄漏
3. 封装计时器逻辑，避免重复代码
4. 优化轮播索引计算逻辑

修改后的代码示例：

import { Component, OnInit, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
import { timer, Subscription } from 'rxjs';

interface SliderEvent {
  id: string;
  type: string;
  title: string;
  description: string;
  file: string;
  time: number;
}

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit, OnDestroy {
  $currentEventTimer$?: Subscription;
  currentEventIndex = 0;
  // 假设这里是你的轮播数据源
  events: SliderEvent[] = [
    {
      id: '1',
      type: 'VIDEO',
      title: 'concerts next month',
      description: "Don't miss your favorite artist's concert",
      file: '',
      time: 5000
    }
    // 其他轮播项...
  ];
  currentEvent: SliderEvent = this.events[0];

  ngOnInit(): void {
    // 组件初始化时启动首次计时器
    this.startTimer();
  }

  ngOnDestroy(): void {
    // 组件销毁时清理订阅
    this.$currentEventTimer$?.unsubscribe();
  }

  next(): void {
    // 用取模运算简化循环索引逻辑
    this.currentEventIndex = (this.currentEventIndex + 1) % this.events.length;
    this.currentEvent = this.events[this.currentEventIndex];
    
    // 重启计时器
    this.restartTimer();
  }

  private startTimer(): void {
    if (this.currentEvent.time) {
      this.$currentEventTimer$ = timer(this.currentEvent.time).subscribe(() => {
        this.next();
      });
    }
  }

  private restartTimer(): void {
    // 先取消旧订阅，再启动新计时器
    this.$currentEventTimer$?.unsubscribe();
    this.startTimer();
  }

  // 若需监听外部输入变化，仅处理非首次触发的变更
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['events'] && !changes['events'].firstChange) {
      this.currentEventIndex = 0;
      this.currentEvent = this.events[0];
      this.restartTimer();
    }
  }
}

关键修改点 #

• 用ngOnInit替代ngOnChanges处理首次计时器初始化，避免循环触发
• 新增ngOnDestroy清理订阅，防止内存泄漏
• 封装startTimer和restartTimer方法，统一管理计时器逻辑
• 简化轮播索引计算，提升代码可读性
• 限制ngOnChanges的处理场景，仅在外部数据源变化时执行逻辑

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