由于 Observable 订阅，Angular 组件未在浏览器中加载

Question

在此组件中，当我在 ngOninit 中调用 getCurrentSalahOrIqamah 函数时，因此我的组件未加载到浏览器中。并保持卡住状态。 我尝试使用延迟加载的急切加载组件，但问题没有解决。

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()
  }

}

角度版本是：“^17.2.0” Rxjs 版本是：“~7.8.0”

Answer 1

在 Angular 17 中，默认启用服务器端渲染（SSR）。但是，如果您的代码包含不断变化的间隔，则完成渲染过程可能会遇到困难。以下代码可以帮助解决此问题：

private subs = new SubSink()

private platformId = inject(PLATFORM_ID);

ngOnInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    this.getCurrentSalahOrIqamah()
  }
}