Angular/Rxjs 管道异步不适用于 s-s-r？

Posted 2023-03-10

【中文标题】Angular/Rxjs 管道异步不适用于 s-s-r？

【英文标题】：Angular/Rxjs pipe async does not work with s-s-r?

【发布时间】：2020-09-26 11:17:39

【问题描述】：

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

我正在使用：

@nestjs/ng-universal 角 9 火力基地 Rxjs

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

<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 检测策略的使用时，s-s-r 模式就可以工作，即使在结构指令中使用异步也是如此。

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

注意

我们将nest.js 用于 s-s-r/通用。

【问题讨论】：

你在组件的什么地方定义了 observable？

请注意，此用户遇到了类似的问题，即仅通过将 index.html 添加到 url:***.com/questions/54924369/…

来加载它

@SantiBarbat 我用信息更新了问题（我与 OP 在同一个团队）

我们也刚刚做到了这一点。感觉这是一个我们应该向 angular 报告的问题

【参考方案1】：

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

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

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

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

【讨论】：

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