如何将 get .pipe takeUntil 与 Angular 中的一个函数与 RxJX

Question

在 Angular 中，每次需要查询端点时，都需要调用以下代码：

this.service.getSomeData()

 .pipe(takeUntil(this.onDestroy$))

 .subscribe((message: any) => { 

    some code here; 

 }

takeUntil 是组件中的一个函数，用于在组件被销毁时取消订阅。

如何重构上面的代码，以便每次使用资源时都不需要键入所有这些内容？所以最后看起来像这样（或多或少？）：

this.service.getSomeData(

   (message: any) => {

     some code here;

   }

)

Answer 1

通常，在从视图/dom 卸载某些组件后，不必销毁/禁用您的服务。将它们视为一层代码来执行一些数据转换或获取。问：为什么每个人都使用takeUntil(this.destroyed$)或this.subscription.unsubscribe()？A：Observable只要有至少一个订阅者就可以生存。因此，如果您有一些长期存在的 observables 在某些操作后没有立即完成，您将有内存泄漏（Angular 可以多次创建/初始化每个组件）。说到Angular的http，所有的get，post，put和delete后端调用完成后，呼叫结束。这意味着你不必添加unsubscribe在onDestroy钩或使用takeUntil。如果您已建立Websocket连接并正在收听某些消息，则您的流将变得持久，并且订阅此消息的每个组件都应在onDestroy循环期间取消订阅。如果你不这样做，Angular 可以多次初始化你的组件（这通常发生在*ngIf=""语句中）并且多个订阅被创建但永远不会被销毁。这会导致内存泄漏。不幸的是，这是大多数 Angular 项目的常见问题，可以通过手动unsubscribe/takeUntil或使用在组件销毁后async自动执行的管道来解决unsubscribe。

Answer 2

一种选择是在模板中使用异步管道来管理订阅data$ = this.service.getSomeData();并在您的模板中<ng-container *ngIf="data$ | async as data">&nbsp; {{ data | json }}&nbsp; You can use the template variable data here that magically updates every time data$&nbsp; emits and no need to unsubscribe as the async pipe manages the subscription for you</ng-container>如果 observable 发出的数据不是模板所需的形状，则使用 map 函数data$ = this.service.getSomeData().pipe(map(data => functionThatTransformsData(data)));您可以在此处阅读我在状态管理库中使用的模式https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

Answer 3

我很高兴你这么问，我遇到了这个Angular AutoUnsubscribe（我引用这个是因为我发现实现它的逻辑真的很漂亮。）它相对易于使用，并且适用于所有可声明对象（显然是管道、指令和组件。）现在省略订阅和取消订阅部分（我不会建议），它非常简单，直接。早些时候你有类似的东西getSomeData(): Observable<any> {&nbsp; // for eg&nbsp; return this.http.get();}您必须将其更改为：getSomeData(callback, onDestroy$): Observable<any> {&nbsp; this.http.get(...).pipe(takeUntil(onDestroy$)).subscribe(val => callback(val));}然后我们将能够拥有我们最终想要的东西。干杯。