Angular/Rxjs pipe 異步不適用於 ssr？

Question

我對在 SSR 上運行的異步 pipe 有疑問。 沒有錯誤，只有一個無限循環（似乎服務器正在等待可觀察的被解析）。

我在用：

像這樣的簡單案例有效：

<p>{{ observable | async }}</p>

但是使用結構指令不起作用：

ngIf

<p *ngIf="(observable$ | async) > 5">{{ observable$ | async }}</p>

恩福

<p *ngFor="let item of items | async">{{ item }}</p>

使用 async 是一個很好的做法，因為它可以避免手動取消訂閱，以避免在組件被銷毀時 memory 泄漏。 但是，使用手動取消訂閱是可行的。

2020 年 8 月 6 日更新

當我在http://localhost:4200之后添加 index.html 時，應用程序加載

異步在模板中是這樣的：

<ng-container *ngIf="currentUser$ | async; else loadingUser">

並且 currentUser$ 在組件的ngOnInit方法中設置：

  ngOnInit(): void {
    this.currentUser$ = this.authService.currentUser$;
  }

2020 年 16 月 6 日更新

當我們在組件中刪除所有使用 OnPush 檢測策略時，SSR 模式就可以工作，即使在結構指令中使用異步也是如此。

所以這似乎表明在結構指令中使用 OnPush TOGETHER 和異步在 SSR 模式下不起作用。

筆記

我們將nest.js用於SSR/Universal。

Answer 1

當我們使用 OnPush 更改檢測策略時，我們基本上會在我們特別需要時檢測到更改。

只有當我們更改變量的引用而不僅僅是值時，才會檢測到 OnPush 更改。

因此，在這里，您的兩個概念都發生了沖突。 要么改變你的檢測策略，要么改變currentUser$ observable 的引用。

我建議你應該在這里改變檢測策略。