Angular / Rxjs管道异步不适用于ssr？

Question

我在SSR上运行的异步管道存在问题。没有错误，只有一个无限循环（似乎服务器正在等待可观察对象的解析）。

我正在使用：

1. @ nestjs / ng-universal
2. Angular 9
3. Firebase
4. Rxjs

像这样的简单案例：

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

但是使用结构指令不起作用：

ngIf

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

Ngfor

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

使用异步是一个好习惯，因为它将避免手动退订，以避免在组件被破坏时发生内存泄漏。但是，使用手动取消订阅的方法。

更新08/06/2020

在我加载http://localhost:4200之后添加index.html时

异步在模板中是这样的：

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

和currentUser $在组件的ngOnInit方法中设置：

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

更新16/06/2020

当我们删除组件中所有对OnPush检测策略的使用时，即使在结构指令中使用了异步，SSR模式也可以工作。

因此，这似乎表明在SSR模式下无法将OnPush TOGETHER与结构指令中的async一起使用。

注意

我们将nest.js用于SSR /通用。

Answer 1

当我们使用OnPush更改检测策略时，我们基本上会在需要时检测到更改。

仅当我们更改变量的引用而不仅仅是值时，才会检测到OnPush更改。

因此，您的两个概念在这里变得矛盾。您可以更改检测策略，也可以更改可观察的 currentUser $ 的引用。

我建议您在这里更改检测策略。