Angular 18 Series (21) router-routingændringsbegivenheder

Lille skarn · Opslået på 05/08/2024 14.11.09

Krav: Detekter ændringer i Angular Route-ruter, skift og vælg menuen i navigationslinjen, og modificerer dynamisk websidens titel ved at indsætte Title, når ruten indlæses.

For at gøre dette opretter vi en simpel app-komponent og injicerer dens router i konstruktøren:

Login er synlig.

Sådanne RouterEvents fungerer som basisklassen (i alfabetisk rækkefølge) for disse router-relaterede begivenheder:

GuardsCheckEnd
GuardsCheckStart
NavigationAnnuller
NavigationEnd
NavigationError
NavigationSprunget over
NavigationStart
ResolveEnd
ResolveStart
Anerkendte ruter

Henvisning:Hyperlink-login er synlig.

Ovenstående liste over kategorier er et potentielt resultat, som din router kan udstråle. For eksempel, hvis en bruger begynder at navigere til en ny visning, vil begivenhederne NavigationStart og NavigationEnd blive kaldt.

For at få denne information (og mere) kan vi abonnere på router.events-begivenheden med følgende kode:

Login er synlig.

Filtrer begivenheder efter hvis betingelse, koden er som følger:

Login er synlig.

Hvis du kun ønsker én begivenhed, f.eks. NavigationEnd, kan vi filtrere() bringe ind og overføre en observabel fra RxJS, så den kun sendes ud på specifikke begivenheder:

Login er synlig.

Ændr sidetitelkoden:

Login er synlig.

Når du klikker på menuen for at skifte rute, er renderingen som følger:

(Slut)

[Kantet] Angular 18 Series (21) router-routingændringsbegivenheder

Relaterede indlæg

Afsnit set