上述情况的另一个简短补充是:

总是取消订阅，当订阅流中的新值不再需要或无关紧要时，它将导致更少的触发器数量，并在某些情况下提高性能。订阅的数据/事件不再存在，或者需要对全新流进行新订阅(刷新等)的组件就是取消订阅的好例子。

当组件被销毁时，你通常需要取消订阅，但随着我们的发展，Angular会越来越多地处理它，例如在Angular4的新小版本中，他们有这个部分用于路由取消订阅:

你需要取消订阅吗?如在 ActivatedRoute:一站式的路线信息部分 路由和导航页面，路由器管理它的观察对象 提供并本地化订阅。订阅是 当组件被破坏时进行清理，以防止内存 泄漏，所以你不需要从路由paramMap取消订阅 可观察到的。

下面的例子也是Angular中创建一个组件并销毁它的好例子，看看组件是如何实现OnDestroy的，如果你需要onInit，你也可以在你的组件中实现它，比如实现onInit, OnDestroy

import { Component, Input, OnDestroy } from '@angular/core';  
import { MissionService } from './mission.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})

export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;

  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }

  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }

  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

上述情况的另一个简短补充是:

总是取消订阅，当订阅流中的新值不再需要或无关紧要时，它将导致更少的触发器数量，并在某些情况下提高性能。订阅的数据/事件不再存在，或者需要对全新流进行新订阅(刷新等)的组件就是取消订阅的好例子。

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

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方法。

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

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

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

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

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

我希望这对你有所帮助。

对于像AsyncSubject这样直接发送结果的可观察对象，或者来自http请求的可观察对象，你不需要取消订阅。 对这些对象调用unsubscribe()也无妨，但如果可观察对象被关闭，则unsubscribe方法将不会做任何事情:

if (this.closed) {
  return;
}

当你有长期存在的可观察对象，它会随着时间的推移发出多个值(比如一个BehaviorSubject或一个ReplaySubject)，你需要取消订阅以防止内存泄漏。

您可以使用管道操作符轻松创建一个可观察对象，该可观察对象在从这些长期存在的可观察对象发出结果后直接完成。 在这里的一些回答中提到了take(1)管道。但我更喜欢第一个()管道。采用(1)的不同之处在于:

如果Observable在发送下一个通知之前完成，则向观察者的错误回调传递一个EmptyError。

第一个管道的另一个优点是，你可以传递一个谓词，帮助你返回第一个满足某些条件的值:

const predicate = (result: any) => { 
  // check value and return true if it is the result that satisfies your needs
  return true;
}
observable.pipe(first(predicate)).subscribe(observer);

First将在发出第一个值后直接完成(或者在向函数参数传递满足谓词的第一个值时)，因此不需要取消订阅。

有时你不确定你是否有一个长寿命的观察对象。我并不是说这是一种好的实践，但您可以始终添加第一个管道，以确保您不需要手动取消订阅。在只会发出一个值的可观察对象上添加额外的第一个管道并没有什么坏处。

在开发过程中，您可以使用单个管道，如果源可观察对象发出多个事件，该管道将失败。这可以帮助你探索可观察对象的类型，以及是否有必要从它取消订阅。

observable.pipe(single()).subscribe(observer);

第一个和单个看起来非常相似，两个管道都可以接受一个可选的谓词，但区别是重要的，并在这里的stackoverflow回答中很好地总结:

第一个 将在第一个项目出现时立即发出。之后就会完成。 单 如果源可观察对象发出多个事件将失败。

注意，在我的回答中，我尽量准确和完整地参考了官方文件，但如果遗漏了重要的东西，请评论……