Angular – Wie eine Komponente bei Änderung der Route benachrichtigt werden kann

Reagiert eine Angular-Komponente nicht auf Änderungen? Wir zeigen eine Lösung, wie die Angular-Komponente bei Änderung der Route benachrichtigt wird.

Das Problem

Nutz man in einer Angular-Komponente Route-Parameter, um z.B. Daten zu laden oder je nach Parameter-Wert etwas anderes anzeigen zu lassen, hat man vielleicht schon mal folgendes bemerkt: Die Komponente ändert sich nicht, wenn sich die Route ändert.

Beispiel: In einer DetailComponent sollen Detaildaten geladen werden, auf Grundlage einer ID in den Route-Parametern.
Am einfachsten kann man dafür den Parameter aus dem Snapshot der aktiven Route holen. Dazu injected man die Inztanz von ActivatedRoute im Konstruktor der Komponente.

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: 'detail.component.html'
})
export class DetailComponent implements OnInit {
  constructor(private activeRoute: ActivatedRoute) {}

  ngOnInit() {
    const routeParams = this.activeRoute.snapshot.params;
    // lade etwas mit der id in parameters
    this.loadDetail(routeParams.id);
  }
}

Problem bei dieser Lösung: Der Parameter wird eben nur aus dem Snapshot genommen. Das heißt, diese Parameter stammen aus dem Snapshot der Route beim ersten Laden der Komponente. Diese Werte werden für das erste Laden der Komponente berechnet und ändern sich nicht, es sei denn, man lädt die Seite neu.
Hat man nun z.B. eine Sidebar mit einem Menü, welches die Route ändert, so ändern sich die Snapshot-Werte in unserer DetailComponent trotzdem nicht. Es werden also trotz Änderung der Routenparameter die „alten“ Details geladen mit der ID aus dem initialem Snapshot.

Die Lösung: Subscriptions

ActivatedRoute stellt die Query- und Route-Parameter glücklicherweise auch in Form von Observables bereit. Wir können also diese Observables abonnieren (subscribe) und werden immer dann im Subscriber benachrichtigt, wenn sich die Routenparameter ändern.

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: 'detail.component.html'
})
export class DetailComponent implements OnInit {
  constructor(private activeRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activeRoute.params.subscribe(routeParams => {
      this.loadDetail(routeParams.id);
    });
  }
}

Perfekt. Damit weiß unsere Komponente nun, wann sich die Route-Parameter ändern und kann die korrekten Details laden.
Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.