取消订阅 Rxjs Observables

Question

我开始使用一个使用 Rxjs observables 的遗留 angular 6 应用程序。组件中的可观察对象似乎没有使用我所看到的取消订阅。 ngOnInit 中的订阅示例：

this.service.getCustomerDetail(customers).subscribe(
          (data) => {
            this.customerData = data;
          },
          () => {
            this.notify.addNotification(
              new notification(
                `Error retrieving customer data`
              )
            );
          }
        );

订阅者正在使用完成，即使其中没​​有任何内容，即 Rxjs 订阅的 Next、Error、Complete 值，但在我看来，它需要将这些推送到订阅中，然后在 ngOnDestroy 上取消订阅所有这些。即使完整在可观察对象内，这些没有取消订阅的订阅也会留在堆内存中，也就是导致内存泄漏，这是正确的吗？

在我的订阅使用错误和完整部分的情况下，我是否会使用 TakeUntil 方法，例如：

this.service.getCustomerDetail(customers)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(
          (data) => {
            this.customerData = data;
          },
          () => {
            //error section
            this.notify.addNotification(
              new notification(
                `Error retrieving customer data`
              )
            );
          },
          () => {
            //complete section
            this.loadAddlDetail();
          }
        );

感谢您提供这方面的任何信息。

Answer 1

您可以使用 ngOnDestroy() 并在其中添加 unsubscribe()，如下所示

ngOnDestroy() {
 if(serviceSubscription != null){
  serviceSubscription.unsubscribe();
 } 
}

或者您可以在 html 模板本身上使用异步管道，这样您就不必像下面那样手动取消订阅。

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

Answer 2

有两种方法可以做到这一点。如果这是一个孤立的案例，以下就足够了

方法 1 - 如果这是一个孤立的案例

------------------------------------------ --------

课堂上

更改类声明以包含OnDestroy

export class AppComponent implements OnInit, OnDestroy

添加私有变量来存储订阅

private serviceSubscription  = null

在 ngOnInit 中

this.serviceSubscription = this.service.getCustomerDetail(customers).subscribe(
      (data) => {
        this.customerData = data;
      },
      () => {
        this.notify.addNotification(
          new notification(
            `Error retrieving customer data`
          )
        );
      }
    );

实施 OnDestroy

ngOnDestroy() {
   if (this.serviceSubscription != null) {
     this.serviceSubscription.unsubscribe()
   }
} 

------------------------------------------ --------------

方法 2 - 如果在多个地方看到这种情况

------------------------------------------ --------------

为组件component-base.ts创建基类

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

export class ComponentBase implements OnDestroy {
    private subscriptions: Subscription[] = [];

    protected rxs(s: Subscription): void {
        this.subscriptions.push(s);
    }

    ngOnDestroy() {
        this.subscriptions.forEach(x => x.unsubscribe());
    }
}

从ComponentBase扩展组件

export class AppComponent extends ComponentBase implements OnInit

在 ngOnInit 中

ngOnInit() {
    this.rxs(this.service.getCustomerDetail(customers).subscribe(
        (data) => {
        this.customerData = data;
        },
        () => {
        this.notify.addNotification(
            new notification(
            `Error retrieving customer data`
            )
        );
        }
    ));
}