Angular组件因Observable订阅无法加载，页面卡顿求助

问题描述 #

在Angular组件的ngOnInit钩子中调用getCurrentSalahOrIqamah函数后，组件无法正常加载，页面持续卡顿。已尝试懒加载和立即加载两种组件加载方式，问题仍未解决。

环境信息 #

• Angular版本：^17.2.0
• RxJS版本：~7.8.0

相关代码 #

import { Component, OnDestroy, OnInit } from '@angular/core';
import { SubSink } from 'subsink';
import { interval, map } from 'rxjs';

@Component({
      selector: 'app-timingscreen',
      standalone: true,
      imports: [],
      providers: [],
      templateUrl: './timingscreen.component.html',
      styleUrl: './timingscreen.component.scss'
    })
export class TimingscreenComponent {
  private subs = new SubSink()

  ngOnInit(): void {
    this.getCurrentSalahOrIqamah()
  }

  getCurrentSalahOrIqamah() {
    this.subs.sink = interval(1000).pipe(
      map(() => {
        const date = new Date();
        return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
      })
    ).subscribe(
      {
        next:(timeInSeconds:number)=>{
          console.log(timeInSeconds)
        }
      }
    )
    
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe()
  }

}

解决方案排查与修复 #

1. 补全接口实现 #

原组件类未显式实现OnInit和OnDestroy接口，虽然Angular能隐式识别钩子，但显式实现是规范写法，可避免潜在类型检查问题：

export class TimingscreenComponent implements OnInit, OnDestroy {
  // ... 其余代码不变
}

2. 移除高频控制台日志 #

interval(1000)每秒触发一次console.log，大量日志堆积会占用浏览器资源，直接注释或移除该日志输出：

next:(timeInSeconds:number)=>{
  // console.log(timeInSeconds) // 移除这条日志
}

3. 改用RxJS原生方式管理订阅 #

SubSink若版本兼容不佳可能引发问题，推荐使用RxJS的takeUntil操作符管理订阅，更稳定且符合Angular最佳实践：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { interval, map, takeUntil } from 'rxjs';
import { Subject } from 'rxjs';

@Component({
      selector: 'app-timingscreen',
      standalone: true,
      imports: [],
      providers: [],
      templateUrl: './timingscreen.component.html',
      styleUrl: './timingscreen.component.scss'
    })
export class TimingscreenComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.getCurrentSalahOrIqamah()
  }

  getCurrentSalahOrIqamah() {
    interval(1000).pipe(
      map(() => {
        const date = new Date();
        return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
      }),
      takeUntil(this.destroy$) // 组件销毁时自动取消订阅
    ).subscribe(
      {
        next:(timeInSeconds:number)=>{
          // 业务逻辑处理
        }
      }
    )
    
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

}

4. 优化组件变更检测 #

若模板中绑定了每秒更新的数据，可开启OnPush变更检测策略减少不必要的检测：

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

@Component({
      selector: 'app-timingscreen',
      standalone: true,
      imports: [],
      providers: [],
      templateUrl: './timingscreen.component.html',
      styleUrl: './timingscreen.component.scss',
      changeDetection: ChangeDetectionStrategy.OnPush // 开启OnPush策略
    })
export class TimingscreenComponent implements OnInit, OnDestroy {
  // ... 其余代码不变
}

5. 排查浏览器环境 #

关闭浏览器中占用资源的扩展程序，或重启浏览器后测试，排除外部因素导致的卡顿。

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