Wie kann man Query-Parameter in Angular auslesen?
- Verwendung von ActivatedRoute zum Auslesen von Query-Parametern
- Query-Parameter einmalig mit snapshot auslesen
- Query-Parameter mit Observable abonnieren
- Beispielcode zum Auslesen der Query-Parameter
- Zusammenfassung
In Angular ist es häufig notwendig, die Query-Parameter aus der URL auszulesen, um dynamische Inhalte anzuzeigen oder die Anwendung entsprechend zu steuern. Query-Parameter sind die Schlüssel-Wert-Paare, die nach dem Fragezeichen in einer URL folgen, zum Beispiel ?id=123&name=Max. Angular stellt hierfür verschiedene Möglichkeiten bereit, die es erlauben, diese Parameter innerhalb einer Komponente einfach und effizient zu bekommen.
Verwendung von ActivatedRoute zum Auslesen von Query-Parametern
Die zentrale Klasse zum Zugriff auf die aktuellen Routeninformationen, inklusive Query-Parameter, ist ActivatedRoute. Diese wird über Dependency Injection in einer Komponente bereitgestellt und ermöglicht den Zugriff auf die Parameter der aktiven Route. Um Query-Parameter zu beziehen, kann man entweder auf den Observable-Stream queryParams zugreifen oder auf die einmaligen Werte über die snapshot.
Query-Parameter einmalig mit snapshot auslesen
Möchte man die Query-Parameter nur einmal beim Initialisieren der Komponente einlesen, eignet sich der Zugriff über this.route.snapshot.queryParams. Dadurch erhält man ein Objekt mit allen Query-Parametern als Schlüssel-Wert-Paare. Hierbei gilt zu beachten, dass Änderungen an den Parametern während der Laufzeit der Komponente nicht automatisch erfasst werden.
Query-Parameter mit Observable abonnieren
Wenn die Anwendung auf Änderungen der Query-Parameter reagieren soll, ist es sinnvoll, den Observable-Stream this.route.queryParams zu abonnieren. Damit bekommt die Komponente bei jeder Änderung automatisch die neuen Werte geliefert. Diese Methode ist vor allem wichtig, wenn sich die URL innerhalb der gleichen Komponente häufiger ändert, ohne dass diese neu geladen wird.
Beispielcode zum Auslesen der Query-Parameter
Im folgenden Beispiel sehen Sie, wie eine Komponente mithilfe von ActivatedRoute die Query-Parameter abruft und darauf reagiert. Im Konstruktor wird ActivatedRoute injiziert, im ngOnInit entweder das Snapshot-Objekt oder das Observable genutzt:
import { Component, OnInit } from @angular/core;import { ActivatedRoute } from @angular/router;@Component({ selector: app-beispiel, templateUrl: ./beispiel.component.html})export class BeispielComponent implements OnInit { id: string | null = null; constructor(private route: ActivatedRoute) {} ngOnInit(): void { // Einmaliges Auslesen this.id = this.route.snapshot.queryParams || null; // Oder reaktives Auslesen auf Änderungen this.route.queryParams.subscribe(params => { this.id = params || null; // Hier kann weitere Logik erfolgen, z.B. Laden von Daten basierend auf id }); }}Zusammenfassung
Das Auslesen von Query-Parametern in Angular erfolgt primär über den Dienst ActivatedRoute. Je nach Anwendungsfall kann man entweder die einmaligen Werte über snapshot.queryParams nutzen oder wie mit queryParams als Observable auf alle Änderungen reagieren. Beide Methoden ermöglichen es, die URL dynamisch auszuwerten und dadurch das Verhalten der Anwendung flexibel zu steuern.