Angular 取消订阅Rxjs观测值

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

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

订阅正在使用完成，即使其中没有任何内容，也就是Rxjs订阅的下一个、错误、完成值，但在我看来，它需要将这些内容推送到订阅中，然后在ngOnDestroy上取消所有订阅。如果这些订阅没有取消订阅，即使完整内容在可观察范围内，也会保留在堆内存中，即导致内存泄漏，这是正确的吗

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

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

---

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

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

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

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

课堂上

更改类声明以包括

ondestory

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

ngOnInit() {
    this.rxs(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());
    }
}

export class AppComponent extends ComponentBase implements OnInit

从

组件库扩展组件

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

export class AppComponent extends ComponentBase implements OnInit

ngOnInit中的

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

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

---

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

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

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

课堂上

更改类声明以包括

ondestory

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

ngOnInit() {
    this.rxs(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());
    }
}

export class AppComponent extends ComponentBase implements OnInit

从

组件库扩展组件

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

export class AppComponent extends ComponentBase implements OnInit

ngOnInit中的

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

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

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

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

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

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

{{可观察|异步}

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

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

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

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

{{可观察|异步}

awesome感谢您的反馈和示例。角度标准方法是使用takeUntil和单个主题来完成所有观察，或者使用异步管道。订阅数组不是一个好的解决方案。谢谢Adrian，我正在研究它that@AdrianBrand如果我的订阅已经在第三部分有一个完整的部分，也就是我有一个下一个获取数据的部分，那么错误是一个完整的部分调用了一些其他方法。在这种情况下，我应该使用TakeUntil来调用.next and.complete on the Ngondestory吗？太棒了，谢谢你的反馈和示例。角度标准的方法是使用TakeUntil和单个主题来完成所有的观察，或者使用异步管道。订阅数组不是一个好的解决方案。谢谢Adrian，我正在研究它that@AdrianBrand如果我的订阅已经在第三部分有一个完整的部分，也就是我有一个下一个获取数据的部分，那么错误是一个完整的部分调用了一些其他方法。在这种情况下，我应该使用Take直到调用。下一步。完成Ngondestory？如果您的问题得到解决，请接受答案。谢谢，例如，subscribe正在点击一个httpget，它将数据加载到一个对象数组中，该数组被持久化并使用。如果不添加取消订阅，会发生什么情况？是回调作为分配的内存留在堆上，直到它被销毁吗？我也在考虑使用TakeUntil，但不使用服务http调用，当它在下一次返回时，我将其设置到一个对象数组中，然后我就得到了订阅的错误和完整区域。如果没有错误，则不会自动调用complete，而这正是造成混淆的原因。例如，如果我在Ngondestory上添加TakeUntil，它将调用complete和next。如果您的问题已解决，请接受答案。谢谢，例如，subscribe正在点击一个httpget，它将数据加载到一个对象数组中，该数组被持久化并使用。如果不添加取消订阅，会发生什么情况？是回调作为分配的内存留在堆上，直到它被销毁吗？我也在考虑使用TakeUntil，但不使用服务http调用，当它在下一次返回时，我将其设置到一个对象数组中，然后我就得到了订阅的错误和完整区域。如果没有错误，则不会自动调用complete，而这正是造成混淆的原因。例如，如果我在Ngondestory上添加TakeUntil，它也会调用complete和next。TakeUntil方法是首选的角度解决方案@Adrianbril，并在示例描述中添加了一个问题：如果订阅中已经有错误和完整部分，我会使用TakeUntil吗？TakeUntil方法是首选的角度解决方案solution@AdrianBrand在描述中添加了一个问题