我是否需要取消订阅 ActivatedRoute (例如 params)的可观测内容?

我发现许多例子,其中 ActivatedRoute观察,如 paramsurl是订阅,但没有取消订阅。

constructor(private route: ActivatedRoute) {}


ngOnInit() {
this.route.params
// (+) converts string 'id' to a number
.switchMap((params: Params) => this.service.getHero(+params['id']))
.subscribe((hero: Hero) => this.hero = hero);
}
  • 对于每个组件创建,路由对象和订阅是否自动销毁并重新创建?
  • 我必须关心取消那些 Observable的订阅吗?
  • 如果没有,您能解释一下在 Router.routerState中 ActivatedRoute 对象树会发生什么情况吗?
37644 次浏览

The component will be destroyed and the routerState will become unreferenced when the router navigates to a different route, which will make them free to get garbage collected including the observable.

If you pass around references to this component to other components or services, the component won't be garbage collected and the subscription would be kept active, but I'm sure (without verifying) that the observable will be completed by the router when navigating away and cause the subscription to cancel.

No

From the docs :

When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.

There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.

The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

Feel free to unsubscribe anyway. It is harmless and never a bad practice.

As the winning answer quotes about the subscriptions to ActivatedRoute, Angular unsubscribes automatically.

The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

In case you want to know how to unsubscribe from Observables:

import { Component,
OnInit,
OnDestroy }      from '@angular/core';
import { ActivatedRoute } from '@angular/router';
// Type
import { Subscription } from 'rxjs/Subscription';




@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit, OnDestroy {
paramsSubscription : Subscription;


constructor(private activatedRoute : ActivatedRoute) { }


/* Angular lifecycle hooks
*/
ngOnInit() {
console.log("Component initialized");
this.paramsSubscription = this.activatedRoute.params.subscribe( params => {


});
}


ngOnDestroy() {
console.log("Component will be destroyed");
this.paramsSubscription.unsubscribe();
}


}

Whenever you are adding subscribe to a component, you always almost need to unsubscribe when the component is getting destroyed. But subscribe to the Activated route params doesn't require to unsubscribe as the router destroys the subscribe whenever its no longer needed.

Http observables calls and router observables dont need to unsubscribe manually. In case you handle other kind of observbable or your own observable you should do it on ngOnDestroy(). You do it calling unsubscribe() method inside Suscription object where you storage your observable in the component.