Angular Academy · Lekcja

Zdarzenia routera i nawigacja

Reagować na zdarzenia cyklu życia nawigacji

Zdarzenia routera i nawigacja to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Strumień zdarzeń routera

Router.events to observable emitujący zdarzenia podczas cyklu życia nawigacji: rozpoczęcie, rozpoznawanie, sprawdzanie guardów, rozwiązywanie danych i zakończenie. Należy się do niego zasubskrybować, aby globalnie reagować na nawigację.

Najważniejsze typy zdarzeń

Typowe zdarzenia to: NavigationStart, NavigationEnd, NavigationCancel i NavigationError. Każde z nich jest instancją klasy, którą można filtrować.

Nasłuchiwanie NavigationEnd

Strumień można przefiltrować do określonego typu zdarzenia za pomocą filter i sprawdzenia instanceof.

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));

Globalny wskaźnik ładowania

Należy wyświetlać spinner między NavigationStart a NavigationEnd/Cancel/Error.

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

Przewijanie na górę podczas nawigacji

Po każdej pomyślnej nawigacji należy przywrócić pozycję przewijania. (Dostępna jest również wbudowana opcja scrollPositionRestoration).

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

Śledzenie stron w analityce

NavigationEnd to idealny moment na rejestrowanie wyświetleń stron w narzędziu analitycznym.

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

Nawigacja programowa

router.navigate przyjmuje tablicę poleceń, a router.navigateByUrl — pełny adres URL w postaci ciągu znaków. Obie metody zwracają promise rozstrzygany informacją, czy nawigacja się powiodła.

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

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

Nawigacja względna

Należy użyć relativeTo, aby nawigować względem bieżącej trasy, na przykład z komponentu podrzędnego.

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

routerLink i stan aktywności

W szablonach routerLink deklaratywnie obsługuje nawigację, a routerLinkActive dodaje klasę CSS do aktywnego łącza.

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

Obsługa NavigationError

Należy zasubskrybować NavigationError, aby obsługiwać nieudane nawigacje (np. z powodu nieudanego resolvera lub ładowania leniwego) i wyświetlać użytkownikowi zrozumiały komunikat.

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

Filtrowanie zdarzeń z typami

Angular oferuje również typowanie RouterEvent; predykat będący strażnikiem typu w filter zapewnia subskrybentowi poprawnie typowane zdarzenie bez rzutowania.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat zdarzeń routera.

Podsumowanie: zdarzenia routera i nawigacja

Router.events udostępnia cykl życia nawigacji.

Należy filtrować zdarzenia NavigationStart/End/Cancel/Error.
Można za ich pomocą sterować spinnerami ładowania, resetowaniem przewijania i analityką.
Nawigację można wykonywać za pomocą navigate/navigateByUrl lub routerLink.

Ukończono kurs Angular Router Advanced.

Często zadawane pytania

Czy lekcja „Zdarzenia routera i nawigacja” jest bezpłatna?

Tak — pełny tekst „Zdarzenia routera i nawigacja” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zdarzenia routera i nawigacja”?

Reagować na zdarzenia cyklu życia nawigacji Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Zdarzenia routera i nawigacja”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy