Búsqueda de sitios web

angular - ¿Tengo que cancelar la suscripción a los observables de ActivatedRoute (por ejemplo, params)?

Encuentro muchos ejemplos donde los Observables de ActivatedRoute como params o url son suscritos pero no cancelados.

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);
}
  • ¿Se destruyen los objetos de ruta y las suscripciones automáticamente y se crean de nuevo para cada creación de componente?
  • ¿Tengo que preocuparme por darme de baja de esos Observables?
  • Si no, ¿puedes explicar qué sucede con el árbol de objetos ActivatedRoute en Router.routerState?

Respuesta #1

No

De los documentos :

Al suscribirse a un observable en un componente, casi siempre se dispone a cancelar la suscripción cuando el componente se destruye.

Hay algunos observables excepcionales donde esto no es necesario. Los observables de ActivatedRoute están entre las excepciones.

El ActivatedRoute y sus observables están aislados del propio Router. El Router destruye un componente enrutado cuando ya no es necesario y el ActivatedRoute inyectado muere con él.

Siéntete libre de darte de baja de todos modos. No es dañino y nunca es una mala práctica.

Respuesta #2

Como la respuesta ganadora cita sobre las suscripciones a ActivatedRoute, Angular cancela automáticamente la suscripción.

El enrutador destruye un componente enrutado cuando ya no es necesario y el ActivatedRoute inyectado muere con él.

En caso de que quieras saber cómo desuscribirte de 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();
  }

}

Artículos relacionados