Håndtering af Ikke-Eksisterende Ruter i Angular
Nogle gange kan brugere indtaste en forkert URL manuelt eller klikke på et forældet link. I sådanne tilfælde er det vigtigt at vise en tydelig "Siden blev ikke fundet"-meddelelse i stedet for en tom skærm eller en teknisk fejl. I dette modul oprettes en 404-side-komponent, ruterne konfigureres til at vise den for alle ukendte stier, og der tilføjes en gennemarbejdet styling.
Oprettelse af NotFoundComponent
Der oprettes en ny Angular-komponent kaldet NotFoundComponent til brug som 404-side. Den viser en overskrift, en kort fejlmeddelelse og en knap, der omdirigerer brugeren tilbage til forsiden.
Kør følgende kommando for at generere komponenten:
Dette opretter automatisk en not-found-mappe med fire filer. Du kender allerede disse filer, og du kan slette testfilen, hvis du ikke bruger den.
Opbygning af komponenten
Tilføj HTML for at vise en "404"-titel, en simpel besked og en "Gå til forsiden"-knap:
not-found-conponent.html
not-found-conponent.css
Dette er et simpelt layout med én særlig del — metoden goToHome(). Når knappen klikkes, omdirigeres brugeren til forsiden.
Vi har også tilføjet noget CSS for at gøre 404-siden visuelt tiltalende — centreret tekst, en markant overskrift og en ren, lys knap.
Tilføjelse af navigationslogik
Nu implementeres metoden til at navigere brugeren tilbage til startsiden.
not-found-conponent.ts
Her injiceres Angulars Router for manuelt at navigere mellem ruter. I goToHome()-metoden anvendes navigate(['/']) til at sende brugeren til rodruten.
Håndtering af alle ukendte ruter
Nu opdateres appens routing-konfiguration, så NotFoundComponent vises for alle udefinerede stier.
Tilføj følgende rute i slutningen af din app.routes.ts-fil:
routes.ts
Stien ** er et wildcard, der matcher enhver rute, som ikke matcher tidligere definerede ruter. For eksempel vil navigation til /wrong-url vise 404-siden.
Hvorfor skal wildcard-ruten altid stå sidst?
I Angular evalueres rutekonfigurationen i rækkefølge—fra top til bund. Det betyder, at routeren tjekker hver rute sekventielt, og stopper, når den finder et match.
Wildcard-ruten ({ path: '**' }) er en opsamlingsrute. Den matcher enhver sti, der ikke blev matchet af de foregående ruter. Hvis du placerer den før mere specifikke ruter, vil den opfange alt, og resten af ruterne vil aldrig blive nået—selv hvis de er gyldige.
Nu håndterer din app navigationsfejl elegant: i stedet for at gå ned eller vise en tom skærm, ser brugerne en venlig 404-besked med en tydelig vej tilbage til forsiden.
Din app er nu fuldt funktionel og brugervenlig! 🎉 Hvis du ønsker at downloade den komplette version af dette projekt, skal du blot klikke på knappen nedenfor.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 3.13Håndtering af Ikke-Eksisterende Ruter i Angular
Stryg for at vise menuen
Nogle gange kan brugere indtaste en forkert URL manuelt eller klikke på et forældet link. I sådanne tilfælde er det vigtigt at vise en tydelig "Siden blev ikke fundet"-meddelelse i stedet for en tom skærm eller en teknisk fejl. I dette modul oprettes en 404-side-komponent, ruterne konfigureres til at vise den for alle ukendte stier, og der tilføjes en gennemarbejdet styling.
Oprettelse af NotFoundComponent
Der oprettes en ny Angular-komponent kaldet NotFoundComponent til brug som 404-side. Den viser en overskrift, en kort fejlmeddelelse og en knap, der omdirigerer brugeren tilbage til forsiden.
Kør følgende kommando for at generere komponenten:
Dette opretter automatisk en not-found-mappe med fire filer. Du kender allerede disse filer, og du kan slette testfilen, hvis du ikke bruger den.
Opbygning af komponenten
Tilføj HTML for at vise en "404"-titel, en simpel besked og en "Gå til forsiden"-knap:
not-found-conponent.html
not-found-conponent.css
Dette er et simpelt layout med én særlig del — metoden goToHome(). Når knappen klikkes, omdirigeres brugeren til forsiden.
Vi har også tilføjet noget CSS for at gøre 404-siden visuelt tiltalende — centreret tekst, en markant overskrift og en ren, lys knap.
Tilføjelse af navigationslogik
Nu implementeres metoden til at navigere brugeren tilbage til startsiden.
not-found-conponent.ts
Her injiceres Angulars Router for manuelt at navigere mellem ruter. I goToHome()-metoden anvendes navigate(['/']) til at sende brugeren til rodruten.
Håndtering af alle ukendte ruter
Nu opdateres appens routing-konfiguration, så NotFoundComponent vises for alle udefinerede stier.
Tilføj følgende rute i slutningen af din app.routes.ts-fil:
routes.ts
Stien ** er et wildcard, der matcher enhver rute, som ikke matcher tidligere definerede ruter. For eksempel vil navigation til /wrong-url vise 404-siden.
Hvorfor skal wildcard-ruten altid stå sidst?
I Angular evalueres rutekonfigurationen i rækkefølge—fra top til bund. Det betyder, at routeren tjekker hver rute sekventielt, og stopper, når den finder et match.
Wildcard-ruten ({ path: '**' }) er en opsamlingsrute. Den matcher enhver sti, der ikke blev matchet af de foregående ruter. Hvis du placerer den før mere specifikke ruter, vil den opfange alt, og resten af ruterne vil aldrig blive nået—selv hvis de er gyldige.
Nu håndterer din app navigationsfejl elegant: i stedet for at gå ned eller vise en tom skærm, ser brugerne en venlig 404-besked med en tydelig vej tilbage til forsiden.
Din app er nu fuldt funktionel og brugervenlig! 🎉 Hvis du ønsker at downloade den komplette version af dette projekt, skal du blot klikke på knappen nedenfor.
Tak for dine kommentarer!
