Angular Academy · Lektion

Router-Ereignisse und Navigation

Auf Ereignisse im Navigationslebenszyklus reagieren

Router-Ereignisse und Navigation ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Der Ereignisstrom des Routers

Router.events ist ein Observable, das während des Navigationslebenszyklus Ereignisse ausgibt: Start, Erkennung, Guard-Prüfungen, Auflösung und Ende. Abonnieren Sie den Strom, um global auf Navigationen zu reagieren.

Wichtige Ereignistypen

Häufige Ereignisse sind: NavigationStart, NavigationEnd, NavigationCancel und NavigationError. Jedes Ereignis ist eine Klasseninstanz, nach der Sie filtern können.

Auf NavigationEnd reagieren

Filtern Sie den Strom mit filter und einer instanceof-Prüfung nach einem bestimmten Ereignistyp.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

Globaler Ladeindikator

Zeigen Sie zwischen NavigationStart und NavigationEnd/Cancel/Error einen Spinner an.

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

Bei der Navigation nach oben scrollen

Setzen Sie die Scrollposition nach jeder erfolgreichen Navigation zurück. (Es gibt auch die integrierte Option scrollPositionRestoration.)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

Analytics-Tracking von Seitenaufrufen

NavigationEnd ist der ideale Anknüpfungspunkt, um Seitenaufrufe an Analytics zu protokollieren.

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

Programmatische Navigation

router.navigate erwartet ein Commands-Array; router.navigateByUrl erwartet eine vollständige URL-Zeichenfolge. Beide geben ein Promise zurück, das auflöst, ob die Navigation erfolgreich war.

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

Relative Navigation

Verwenden Sie relativeTo, um relativ zur aktuellen Route zu navigieren, beispielsweise aus einer untergeordneten Component.

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink und aktiver Zustand

In Templates übernimmt routerLink die deklarative Navigation, während routerLinkActive dem aktiven Link eine CSS-Klasse hinzufügt.

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

Behandlung von NavigationError

Abonnieren Sie NavigationError, um fehlgeschlagene Navigationen zu behandeln (z. B. bei einem fehlgeschlagenen Resolver oder Lazy-Load) und eine verständliche Meldung anzuzeigen.

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

Typisiertes Filtern von Ereignissen

Angular bietet außerdem die Typisierung RouterEvent. Ein Type-Guard-Prädikat in filter liefert Ihnen im Subscriber ein korrekt typisiertes Ereignis, ohne dass Sie es casten müssen.

Kurzer Check

Testen Sie Ihr Verständnis von Router-Ereignissen.

Zusammenfassung: Router-Ereignisse und Navigation

Router.events stellt den Navigationslebenszyklus bereit.

Filtern Sie nach NavigationStart/End/Cancel/Error.
Steuern Sie Ladeindikatoren, das Zurücksetzen der Scrollposition und Analytics.
Navigieren Sie über navigate/navigateByUrl oder routerLink.

Sie haben Angular Router Advanced abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Router-Ereignisse und Navigation“ kostenlos?

Ja — der vollständige Text von „Router-Ereignisse und Navigation“ 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 „Router-Ereignisse und Navigation“?

Auf Ereignisse im Navigationslebenszyklus 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 4 von 4.

Wie lange dauert die Lektion „Router-Ereignisse und Navigation“?

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