Angular - 无法使用 Angular 通用运行 rxjs 间隔

Question

我通过 RXJS 的间隔时间改变参数做了一个轮播效果。

我发现它在开发模式(ng serve)下工作，但在universal中不能正常工作模式，无法进入页面。

例如:

n: number = 0;
max: number = 5;

constructor(){}

ngOnInit() {
  this.carousel();
}

carousel() {
  this.subscription = interval(2000).subscribe(() => {
      //In universal, the console.log message show in node.js background log message not in browser console message. Each time the page is reorganized, it will be executed once and cannot be destroyed.
      console.log(`show the photo: ${this.n}`);
      if (this.n>this.max){
        this.n = 0;
      }else{
       this.n = this.n+1;
      }
  }
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

我在 universal 中找到模型，假设轮播效果在页面 B ，您可以通过页面 A上的链接成功进入页面B ，但是直接打开B页面会失败。

我试图在 ngAfterContentInit() 中启动轮播它不起作用。

Answer 1

如果使用angular通用，则需要使用isPlatformBrowser排除只能在前端运行的代码。

例如:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from "@angular/core";

constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) { }

do(){
    if (isPlatformBrowser(this.platformId)) {
      //do something, only runs on the front end
    }
}