Angular Academy · Lektion

Routenparameter und Query-Parameter

Routenparameter lesen und darauf reagieren

Routenparameter und Query-Parameter ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Routenparameter im Vergleich zu Query-Parametern

Routenparameter sind Teil des Pfads (/user/42). Query-Parameter werden nach ? angehängt (/search?q=ng&page=2). Der Router bietet reaktiven Zugriff auf beide.

Einen Routenparameter definieren

Verwenden Sie im Pfad einen Doppelpunkt, um einen Parameter zu deklarieren.

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

Parameter mit paramMap auslesen

ActivatedRoute.paramMap ist ein Observable, das bei jeder Änderung der Routenparameter einen Wert ausgibt. Verwenden Sie .get(), um einen Wert auszulesen.

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

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Warum Parameter beobachtet werden sollten

Beim Navigieren von /user/1 zu /user/2 wird möglicherweise dieselbe Komponente wiederverwendet. Der Konstruktor wird einmal ausgeführt, aber paramMap gibt erneut einen Wert aus – abonnieren Sie ihn daher, um auf die Änderung zu reagieren.

Snapshot für einmaliges Auslesen

Wenn die Komponente niemals für einen anderen Parameter wiederverwendet wird, können Sie den Snapshot synchron auslesen.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Query-Parameter mit queryParamMap

queryParamMap stellt Werte aus dem Query-String ebenfalls als Observable bereit.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Mit Query-Parametern navigieren

Verwenden Sie die Option queryParams in router.navigate oder der routerLink-Direktive.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Query-Parameter beibehalten

queryParamsHandling: 'merge' behält vorhandene Parameter bei und aktualisiert einige davon; 'preserve' übernimmt sie bei der Navigation.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Komponenten-Input-Binding (modern)

Mit withComponentInputBinding() können Routen- und Query-Parameter direkt an die @Input()-Eigenschaften einer Komponente (oder an Input-Signale) gebunden werden, sodass ActivatedRoute nicht benötigt wird.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll für wiederholte Parameter

Verwenden Sie getAll(), wenn ein Query-Schlüssel mehrfach vorkommen kann, z. B. ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Parameter mit dem Laden von Daten kombinieren

Ein häufiges Muster: Wandeln Sie den Parameter mit switchMap in einen HTTP-Aufruf um, damit eine Änderung der ID die Daten erneut lädt.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Schnelltest

Testen Sie Ihr Verständnis von Routenparametern.

Rückblick: Routen- und Query-Parameter

Der Router stellt Parameter reaktiv bereit.

paramMap: Pfadparameter, die bei Wiederverwendung beobachtet werden sollten.
queryParamMap: Query-String, mit getAll für wiederholte Parameter.
snapshot für einmaliges Auslesen.
withComponentInputBinding() bindet Parameter an Inputs.

Als Nächstes: Resolver und Routendaten.

Häufig gestellte Fragen

Ist die Lektion „Routenparameter und Query-Parameter“ kostenlos?

Ja — der vollständige Text von „Routenparameter und Query-Parameter“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Routenparameter und Query-Parameter“?

Routenparameter lesen und darauf reagieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Routenparameter und Query-Parameter“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy