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的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

有两种方法可以做到这一点。如果是孤立的情况，则满足以下条件

方法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`
          )
        );
      }
    );

实施销毁

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`
            )
        );
        }
    ));
}

Answer 2

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

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

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

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

取消订阅Rxjs Observables

2 个答案: