Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?

I find many examples where ActivatedRoute Observables like params or url are subscribed but not unsubscribed.

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); } 
  • Are the route objects and subscriptions destroyed automagically and newly created for every component creation?
  • Do I have to care about unsubscribing from those Observables?
  • If not, can you explain what happens with the tree of ActivatedRoute objects in Router.routerState?
like image 441
hgoebl Avatar asked Dec 14 '16 08:12

hgoebl


People also ask

Do you need to unsubscribe from ActivatedRoute?

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.

Do you have to unsubscribe from observables?

In Angular applications, it's always recommended to unsubscribe the observables to gain benefits like: Avoids Memory Leaks. Aborting HTTP requests to avoid unwanted calls.

What happens if you don't unsubscribe from an observable?

As you probably know when you subscribe to an observable or event in JavaScript, you usually need to unsubscribe at a certain point to release memory in the system. Otherwise, you will have a memory leak. A memory leak occurs when a section of memory that is no longer being…

Do we need to unsubscribe in ngOnDestroy?

Specifically, we must unsubscribe before Angular destroys the component. Failure to do so could create a memory leak. We unsubscribe from our Observable in the ngOnDestroy method.


2 Answers

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.

like image 171
Milad Avatar answered Sep 28 '22 13:09

Milad


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();   }  } 
like image 32
Marian07 Avatar answered Sep 28 '22 12:09

Marian07