博士TL;
对于这个问题，有两种可观察对象——有限值和无限值。
Observable产生有限(1)的值，而DOM事件监听器之类的Observable产生无限的值。
如果你手动调用subscribe(不使用async管道)，那么从无限个observable中取消订阅。
不要担心有限的，RxJs会处理它们的。
来源:
I tracked down an answer from Rob Wormald in Angular's Gitter here.
He states (I reorganized for clarity and emphasis is mine):
if its a single-value-sequence (like an http request)
the manual cleanup is unnecessary (assuming you subscribe in the controller manually)
i should say "if its a sequence that completes" (of which single value sequences, a la http, are one)
if its an infinite sequence, you should unsubscribe which the async pipe does for you
Also he mentions in this YouTube video on Observables that "they clean up after themselves..." in the context of Observables that complete (like Promises, which always complete because they are always producing one value and ending - we never worried about unsubscribing from Promises to make sure they clean up XHR event listeners, right?)
Also in the Rangle guide to Angular 2 it reads
In most cases we will not need to explicitly call the unsubscribe method unless we want to cancel early or our Observable has a longer lifespan than our subscription. The default behavior of Observable operators is to dispose of the subscription as soon as .complete() or .error() messages are published. Keep in mind that RxJS was designed to be used in a "fire and forget" fashion most of the time.
When does the phrase "our Observable has a longer lifespan than our subscription" apply?
It applies when a subscription is created inside a component which is destroyed before (or not 'long' before) the Observable completes.
I read this as meaning if we subscribe to an http request or an Observable that emits 10 values and our component is destroyed before that http request returns or the 10 values have been emitted, we are still OK!
When the request does return or the 10th value is finally emitted the Observable will complete and all resources will be cleaned up.
If we look at this example from the same Rangle guide we can see that the subscription to route.params does require an unsubscribe() because we don't know when those params will stop changing (emitting new values).
The component could be destroyed by navigating away in which case the route params will likely still be changing (they could technically change until the app ends) and the resources allocated in subscription would still be allocated because there hasn't been a completion.
In this video from NgEurope Rob Wormald also says you do not need to unsubscribe from Router Observables. He also mentions the http service and ActivatedRoute.params in this video from November 2016.
The Angular tutorial, the Routing chapter now states the following:
The Router manages the observables it provides and localizes the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against memory leaks, so we don't need to unsubscribe from the route params Observable.
Here's a discussion on the GitHub Issues for the Angular docs regarding Router Observables where Ward Bell mentions that clarification for all of this is in the works.
我在NGConf上和Ward Bell讨论过这个问题(我甚至给他看了这个答案，他说他是正确的)，但他告诉我Angular的文档团队有一个解决这个问题的方案，但还没有发表(尽管他们正在努力让它得到批准)。他还告诉我，我可以在即将到来的官方推荐中更新我的SO答案。
接下来我们应该使用的解决方案是添加一个私有ngUnsubscribe = new Subject<void>();字段到所有在类代码中有.subscribe()调用observable的组件。
然后调用这个。ngunsubscribe .next();this.ngUnsubscribe.complete ();在ngOnDestroy()方法中。
秘密武器(正如@metamaker已经提到的)是在我们的每个.subscribe()调用之前调用takeUntil(this.ngUnsubscribe)，这将确保所有订阅在组件被销毁时被清除。
例子:
import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';
@Component({
selector: 'app-books',
templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
private ngUnsubscribe = new Subject<void>();
constructor(private booksService: BookService) { }
ngOnInit() {
this.booksService.getBooks()
.pipe(
startWith([]),
filter(books => books.length > 0),
takeUntil(this.ngUnsubscribe)
)
.subscribe(books => console.log(books));
this.booksService.getArchivedBooks()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(archivedBooks => console.log(archivedBooks));
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
注意:重要的是将takeUntil操作符添加为最后一个操作符，以防止操作符链中中间可观察对象的泄漏。
最近，在《Angular冒险》的一集中，Ben Lesh和Ward Bell讨论了如何/何时取消组件中的订阅。讨论大约在1:05:30开始。
Ward提到“现在有一个可怕的takeUntil dance，它需要很多机器”，Shai Reznik提到“Angular可以处理一些订阅，比如http和路由”。
作为回应，Ben提到现在正在讨论允许可观察对象钩子到Angular组件的生命周期事件中，Ward建议组件可以订阅一个生命周期事件的可观察对象，以便知道什么时候完成维护为组件内部状态的可观察对象。
也就是说，我们现在最需要解决方案，所以这里有一些其他的资源。
A recommendation for the takeUntil() pattern from RxJs core team member Nicholas Jamieson and a TSLint rule to help enforce it: https://ncjamieson.com/avoiding-takeuntil-leaks/
Lightweight npm package that exposes an Observable operator that takes a component instance (this) as a parameter and automatically unsubscribes during ngOnDestroy: https://github.com/NetanelBasal/ngx-take-until-destroy
Another variation of the above with slightly better ergonomics if you are not doing AOT builds (but we should all be doing AOT now): https://github.com/smnbbrv/ngx-rx-collector
Custom directive *ngSubscribe that works like async pipe but creates an embedded view in your template so you can refer to the 'unwrapped' value throughout your template: https://netbasal.com/diy-subscription-handling-directive-in-angular-c8f6e762697f
我在Nicholas博客的评论中提到，过度使用takeUntil()可能是一个信号，表明您的组件试图做太多事情，应该考虑将现有组件分离为功能组件和演示组件。然后你可以|将Feature组件的Observable异步到Presentational组件的Input中，这意味着在任何地方都不需要订阅。在这里阅读更多关于这种方法的信息。
