angular - Måste jag avprenumerera från ActivatedRoute (t.ex. params) observables?

Jag hittar många exempel där ActivatedRoute Observables som params eller url prenumereras på men inte avprenumereras.

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);
}
  • Blir ruttobjekten och prenumerationerna förstörda automagiskt och nyss skapade för varje komponentskapande?
  • Måste jag bry mig om att avanmäla mig från de där Observable-objekten?
  • Om inte, kan du förklara vad som händer med trädet av ActivatedRoute-objekt i Router.routerState?

Svar #1

Nej

Från dokumentationen:

När man prenumererar på en observerbar i en komponent ordnar man nästan alltid att avsluta prenumerationen när komponenten förstörs.

Det finns ett fåtal exceptionella observables där detta inte är nödvändigt. ActivatedRoute-observables är bland undantagen.

ActivatedRoute och dess observables är isolerade från själva Routern. Routern förstör en routad komponent när den inte längre behövs och den injicerade ActivatedRoute dör med den.

Känn dig fri att avregistrera dig ändå. Det är ofarligt och aldrig en dålig praxis.

Svar #2

Som det vinnande svaret citerar om subscriptions till ActivatedRoute, avregistrerar Angular automatiskt.

Routern förstör en routad komponent när den inte längre behövs och den injicerade ActivatedRoute dör tillsammans med den.

Om du vill veta hur du avregistrerar dig från 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();
  }

}

Relaterade artiklar