关闭 Observables

关闭 Observables

Photo by 蒂姆·莫斯霍尔德 on 不飞溅

在 Angular 中，我们理想地在任何地方都使用 RxJs。在反应式编程范式中，我们认为数据流要么是惰性的，要么是急切的，它们可以订阅，并且在不再需要时必须取消订阅。否则，我们将面临出现不良行为的风险，在最坏的情况下，甚至会出现内存泄漏。幸运的是，有很多方法可以取消订阅 observables，而有些方法肯定比其他方法更好。

显式退订

作为 RxJs 的初学者，最常见的关闭 observables 的方式是显式方式。当调用 subscribe 方法时，会返回一个订阅，然后我们可以在 ngOnDestroy 生命周期钩子中取消订阅。我们可以只创建一个 Subscription 对象并将具体的订阅添加到类属性中，而不是将这些订阅对象保存在多个类属性中。

Subscription object

通过使用订阅对象并将订阅添加到其中，代码更加简洁，但老实说，这远远不是智慧的尽头，因为它强制您订阅代码并且实际上不是响应式的一点也不。

隐式退订

一种更好的退订方式是隐式执行，或者换句话说：反应式。在这种情况下，我们不必保存任何订阅并明确取消订阅。我们唯一要做的就是使用关闭管道操作符，例如：

• 采取直到
• 拿
• 抛出错误

Reactive Unsubscription

如您所见，这是真正的反应式，当使用 RxJs 时，这始终是一个可以实现的目标。 takeUntil 运算符将在主题首次发出时取消订阅。另一方面，take 操作员有固定的排放量，在达到该量后关闭。

异步管道

绝对最好和最简单的方法是在模板中使用异步管道，因为它会自动订阅和取消订阅 observable，因此我们编写的代码要少得多。

Async Pipe

使用带有 ngIf 的 ng-container 来解包 observable 的值，是确保 observable 已发出值而不创建额外的 DOM 元素的好习惯。请注意，由于异步管道自动订阅，因此不得在代码中订阅 observable。

取消订阅 Hot Observables

另一个经常被遗忘的重要案例是关于 hot observables。在我们看到冷的 observable 之前，但通常我们需要通过使用 share 或 shareReplay 管道操作符来使冷的 observable 成为热的，它将一个主题连接到原始的 observable 并将内部的主题暴露为一个 observable，那么它确实是热的.如果您使用共享，则没有问题，但如果您不注意，使用 shareReplay 时可能会遇到问题。

Hot vs Cold

我们称将主体连接到冷可观察对象的过程 连接 , 这样我们也有一个叫做 断开 ，当所有对热 observable 的订阅都关闭时，它会取消订阅冷 observable。 Share 确实会为我们自动断开连接，但 shareReplay 可能是一个野兽，因为 refCount 参数必须设置为 true，这样它才会自动断开连接。

结论

取消订阅的方法有很多，而最好的一次是使用异步管道，或者当您需要在代码中订阅时使用反应式取消订阅。您应该始终确保您的所有订阅都将在某一时刻取消订阅，否则您将面临内存泄漏或不良行为的风险。

专家提示： 通过查看 DevTools 中的 Memory 选项卡并创建堆快照，您可以轻松查看当前订阅了多少 observable，这样您就可以搜索 observable 并查看有多少实例处于活动状态。

推荐链接

如果你喜欢这篇文章，我很乐意分享我的 推荐链接 ：

[

使用我的推荐链接加入 Medium - Stefan Haas

阅读 Stefan Haas（以及 Medium 上成千上万的其他作家）的每一个故事。您的会员费直接支持……

媒体网

](/@stefan.haas.privat/membership)

其他有趣的读物：

[

重构 Angular 应用程序

重构是软件工程中最重要的技术之一，因为它是项目做的唯一方式……

levelup.gitconnected.com

](https://levelup.gitconnected.com/refactoring-angular-applications-be18a7ee65cb)

[

Angular：不要在模板中使用函数

在这篇简短的博文中，我将向您展示每个 Angular 开发人员都应该知道的 Angular 核心概念之一……

levelup.gitconnected.com

](https://levelup.gitconnected.com/angular-dont-use-functions-in-templates-f33d67db18da)

[

Angular 中的模数与 Nx

使用 DDD 和 Monorepos 创建可持续的应用程序

levelup.gitconnected.com

](https://levelup.gitconnected.com/moduliths-in-angular-with-nx-b8b0076794fb)

[

你的第一个 Angular 微前端

这是关于如何创建一个使用另一个应用程序模块的简单 Angular 应用程序的分步指南……

levelup.gitconnected.com

](https://levelup.gitconnected.com/your-first-angular-microfrontend-58950768a465)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37152/08581710