为了处理订阅，我使用了一个“Unsubscriber”类。

这里是退订类。

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

  addSubscription(subscription: Subscription | Subscription[]) {
    if (Array.isArray(subscription)) {
      this.subscriptions.push(...subscription);
    } else {
      this.subscriptions.push(subscription);
    }
  }

  unsubscribe() {
    this.subscriptions
      .filter(subscription => subscription)
      .forEach(subscription => {
        subscription.unsubscribe();
      });
  }

  ngOnDestroy() {
    this.unsubscribe();
  }
}

你可以在任何组件/服务/效果等中使用这个类。

例子:

class SampleComponent extends Unsubscriber {
    constructor () {
        super();
    }

    this.addSubscription(subscription);
}

你可以使用最新的订阅类来取消对Observable的订阅，代码不会那么乱。

我们可以用普通变量来做这个，但它会在每次新的订阅上覆盖上一次订阅，所以要避免这种情况，当你处理更多数量的可观察对象时，这种方法是非常有用的，以及像behaviour Subject和Subject这样的可观察对象类型

订阅

表示一个一次性资源，比如Observable的执行。订阅有一个重要的方法，即unsubscribe，它不接受参数，只处理订阅所持有的资源。

你可以用两种方式来使用它，

you can directly push the subscription to Subscription Array subscriptions:Subscription[] = []; ngOnInit(): void { this.subscription.push(this.dataService.getMessageTracker().subscribe((param: any) => { //... })); this.subscription.push(this.dataService.getFileTracker().subscribe((param: any) => { //... })); } ngOnDestroy(){ // prevent memory leak when component destroyed this.subscriptions.forEach(s => s.unsubscribe()); } using add() of Subscription subscriptions = new Subscription(); this.subscriptions.add(subscribeOne); this.subscriptions.add(subscribeTwo); ngOnDestroy() { this.subscriptions.unsubscribe(); }

订阅可以保存子订阅并安全地取消所有订阅。这个方法处理可能的错误(例如，如果任何子订阅为空)。

希望这能有所帮助。：）

Angular 2官方文档提供了一个关于何时退订以及何时可以安全忽略的解释。看看这个链接:

https://angular.io/docs/ts/latest/cookbook/component-communication.html !# bidirectional-service

寻找标题为“父母和孩子通过服务通信”的段落，然后是蓝色方框:

注意，当AstronautComponent被销毁时，我们捕获了订阅并取消了订阅。这是一个内存泄漏保护步骤。在这个应用程序中没有实际的风险，因为AstronautComponent的生命周期与应用程序本身的生命周期相同。在更复杂的应用程序中，这并不总是正确的。 我们没有将这个守卫添加到MissionControlComponent中，因为作为父组件，它控制着MissionService的生命周期。

我希望这对你有所帮助。

视情况而定。如果通过调用someObservable.subscribe()，您开始占用一些资源，当组件的生命周期结束时必须手动释放这些资源，那么您应该调用subscription .unsubscribe()来防止内存泄漏。

让我们仔细看看你的例子:

getHero()返回http.get()的结果。如果你查看angular 2的源代码，会发现http.get()创建了两个事件监听器:

_xhr.addEventListener('load', onLoad);
_xhr.addEventListener('error', onError);

通过调用unsubscribe()，你可以取消请求和监听器:

_xhr.removeEventListener('load', onLoad);
_xhr.removeEventListener('error', onError);
_xhr.abort();

请注意，_xhr是特定于平台的，但我认为在您的情况下，可以安全地假设它是XMLHttpRequest()。

通常，这已经足够证明需要手动unsubscribe()调用了。但是根据WHATWG规范，XMLHttpRequest()一旦“完成”就会受到垃圾收集的影响，即使有事件监听器附加到它。所以我想这就是为什么angular 2官方指南省略了unsubscribe()，让GC清理侦听器。

至于第二个例子，它取决于参数的实现。从今天起，angular官方指南不再显示取消订阅参数。我再次查看了src，发现params只是一个行为主体。由于没有使用事件侦听器或计时器，也没有创建全局变量，因此省略unsubscribe()应该是安全的。

你的问题的底线是总是调用unsubscribe()来防止内存泄漏，除非你确定可观察对象的执行不会创建全局变量、添加事件侦听器、设置计时器或做任何其他导致内存泄漏的事情。

如果有疑问，请查看该可观察对象的实现。如果可观察对象已经在其unsubscribe()中写入了一些清理逻辑，这通常是构造函数返回的函数，那么你有充分的理由认真考虑调用unsubscribe()。

出于性能原因，总是建议从你的可观察订阅中取消订阅，以避免内存泄漏，有不同的方法，

顺便说一下，我读了大部分的答案，我没有发现有人在谈论异步管道，推荐在Angular应用中使用Rxjs模式，因为它在离开组件时会自动提供订阅和订阅，而这些订阅将被销毁:

请找到一个如何实现它的例子

app.compoennt.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { BookService } from './book.service';
import { Book } from './book';

@Component({
   selector: 'app-observable',
   templateUrl: './observable.component.html'
})
export class AppComponent implements OnInit { 
   books$: Observable<Book[]>
   constructor(private bookService: BookService) { }
   ngOnInit(): void {
        this.books$ = this.bookService.getBooksWithObservable();
   }
} 

app.compoennt.html:

<h3>AsyncPipe with Promise using NgFor</h3>
<ul>
  <li *ngFor="let book of books$ | async" >
    Id: {{book?.id}}, Name: {{book?.name}}
  </li>
</ul>

如果需要取消订阅，可以使用以下可观察管道方法的操作符

import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { OnDestroy } from '@angular/core';

export const takeUntilDestroyed = (componentInstance: OnDestroy) => <T>(observable: Observable<T>) => {
  const subjectPropertyName = '__takeUntilDestroySubject__';
  const originalOnDestroy = componentInstance.ngOnDestroy;
  const componentSubject = componentInstance[subjectPropertyName] as Subject<any> || new Subject();

  componentInstance.ngOnDestroy = (...args) => {
    originalOnDestroy.apply(componentInstance, args);
    componentSubject.next(true);
    componentSubject.complete();
  };

  return observable.pipe(takeUntil<T>(componentSubject));
};

它可以这样使用:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({ template: '<div></div>' })
export class SomeComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    const observable = Observable.create(observer => {
      observer.next('Hello');
    });

    observable
      .pipe(takeUntilDestroyed(this))
      .subscribe(val => console.log(val));
  }

  ngOnDestroy(): void {
  }
}

操作符包装组件的ngOnDestroy方法。

重点:操作符应该在可观察管道的最后一个。