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

【问题标题】：Angular/Rxjs pipe async does not work with ssr?Angular/Rxjs 管道异步不适用于 ssr？
【发布时间】：2020-09-26 11:17:39
【问题描述】：

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

我正在使用：

这样一个简单的例子可以工作：

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

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

ngIf

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

Ngfor

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

使用异步是一个很好的做法，因为它可以避免手动取消订阅以避免组件被销毁时的内存泄漏。但是，使用手动取消订阅是可行的。

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 年 6 月 16 日更新

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

所以这似乎表明在结构指令中使用 OnPush TOGETHER 和异步在 SSR 模式下不起作用。

注意

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

【问题讨论】：

你在组件的什么地方定义了 observable？
请注意，此用户遇到了类似的问题，即仅通过将 index.html 添加到 url:stackoverflow.com/questions/54924369/… 来加载它
@SantiBarbat 我用信息更新了问题（我与 OP 在同一个团队）
我们也刚刚做到了这一点。感觉这是一个我们应该向 angular 报告的问题

【解决方案1】：

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

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

所以在这里，您的两个概念都发生了冲突。要么改变你的检测策略，要么改变 currentUser$ observable 的引用。

我建议你应该在这里更改检测策略。

【讨论】：

谢谢，但我了解更改检测的工作原理，包括默认值和 OnPush。我们确实将检测策略更改为默认策略（即自动），然后 SSR 模式工作。但是 OnPush 和异步管道在同一个项目中，SSR 模式不起作用。