Hantering av Icke-Existerande Rutter i Angular
Ibland kan användare skriva in en felaktig URL manuellt eller klicka på en föråldrad länk. I sådana fall är det viktigt att visa ett tydligt "Sidan kunde inte hittas"-meddelande istället för en tom skärm eller ett tekniskt fel. I denna modul kommer vi att skapa en 404-sida-komponent, konfigurera våra rutter för att visa den för alla okända sökvägar och lägga till en genomarbetad design.
Skapa NotFoundComponent
Vi kommer att skapa en ny Angular-komponent kallad NotFoundComponent som ska fungera som vår 404-sida. Den kommer att visa en rubrik, ett kort felmeddelande och en knapp för att omdirigera användaren tillbaka till startsidan.
Kör följande kommando för att generera komponenten:
Detta kommer automatiskt att skapa en mapp not-found med fyra filer. Du är redan bekant med dessa filer och kan ta bort testfilen om du inte använder den.
Skapa komponenten
Lägg till HTML för att visa en "404"-titel, ett enkelt meddelande och en "Gå till startsidan"-knapp:
not-found-conponent.html
not-found-conponent.css
Det är en enkel layout med en särskild del — metoden goToHome(). När knappen klickas omdirigeras användaren till startsidan.
Vi har även lagt till viss CSS för att göra 404-sidan visuellt tilltalande — centrerad text, en tydlig rubrik och en ren, ljus knapp.
Lägga till navigeringslogik
Nu implementeras metoden för att navigera användaren tillbaka till startsidan.
not-found-conponent.ts
Här injicerar vi Angulars Router för att manuellt navigera mellan rutter. I metoden goToHome() använder vi navigate(['/']) för att skicka användaren till rotvägen.
Hantering av alla okända rutter
Nu uppdaterar vi appens routningskonfiguration för att visa NotFoundComponent för alla odefinierade sökvägar.
Lägg till följande rutt längst ner i din app.routes.ts-fil:
routes.ts
Sökvägen ** är ett jokertecken som matchar alla rutter som inte matchar tidigare definierade. Till exempel, om du navigerar till /wrong-url visas 404-sidan.
Varför ska jokerteckensrutten alltid vara sist?
I Angular utvärderas ruttkonfigurationen i ordning—uppifrån och ned. Det innebär att routern kontrollerar varje rutt sekventiellt, och när den hittar en matchning slutar den att söka.
Jokerteckensrutten ({ path: '**' }) är en fångstrutt. Den matchar alla sökvägar som inte matchats av tidigare rutter. Om du placerar den före mer specifika rutter kommer den att fånga allt, och resten av rutterna kommer aldrig att nås—även om de är giltiga.
Nu hanterar din app navigeringsfel på ett smidigt sätt: istället för att krascha eller visa en tom sida får användaren ett vänligt 404-meddelande med en tydlig väg tillbaka till startsidan.
Din app är nu fullt fungerande och användarvänlig! 🎉 Om du vill ladda ner den kompletta versionen av detta projekt, klicka bara på knappen nedan.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.13Hantering av Icke-Existerande Rutter i Angular
Svep för att visa menyn
Ibland kan användare skriva in en felaktig URL manuellt eller klicka på en föråldrad länk. I sådana fall är det viktigt att visa ett tydligt "Sidan kunde inte hittas"-meddelande istället för en tom skärm eller ett tekniskt fel. I denna modul kommer vi att skapa en 404-sida-komponent, konfigurera våra rutter för att visa den för alla okända sökvägar och lägga till en genomarbetad design.
Skapa NotFoundComponent
Vi kommer att skapa en ny Angular-komponent kallad NotFoundComponent som ska fungera som vår 404-sida. Den kommer att visa en rubrik, ett kort felmeddelande och en knapp för att omdirigera användaren tillbaka till startsidan.
Kör följande kommando för att generera komponenten:
Detta kommer automatiskt att skapa en mapp not-found med fyra filer. Du är redan bekant med dessa filer och kan ta bort testfilen om du inte använder den.
Skapa komponenten
Lägg till HTML för att visa en "404"-titel, ett enkelt meddelande och en "Gå till startsidan"-knapp:
not-found-conponent.html
not-found-conponent.css
Det är en enkel layout med en särskild del — metoden goToHome(). När knappen klickas omdirigeras användaren till startsidan.
Vi har även lagt till viss CSS för att göra 404-sidan visuellt tilltalande — centrerad text, en tydlig rubrik och en ren, ljus knapp.
Lägga till navigeringslogik
Nu implementeras metoden för att navigera användaren tillbaka till startsidan.
not-found-conponent.ts
Här injicerar vi Angulars Router för att manuellt navigera mellan rutter. I metoden goToHome() använder vi navigate(['/']) för att skicka användaren till rotvägen.
Hantering av alla okända rutter
Nu uppdaterar vi appens routningskonfiguration för att visa NotFoundComponent för alla odefinierade sökvägar.
Lägg till följande rutt längst ner i din app.routes.ts-fil:
routes.ts
Sökvägen ** är ett jokertecken som matchar alla rutter som inte matchar tidigare definierade. Till exempel, om du navigerar till /wrong-url visas 404-sidan.
Varför ska jokerteckensrutten alltid vara sist?
I Angular utvärderas ruttkonfigurationen i ordning—uppifrån och ned. Det innebär att routern kontrollerar varje rutt sekventiellt, och när den hittar en matchning slutar den att söka.
Jokerteckensrutten ({ path: '**' }) är en fångstrutt. Den matchar alla sökvägar som inte matchats av tidigare rutter. Om du placerar den före mer specifika rutter kommer den att fånga allt, och resten av rutterna kommer aldrig att nås—även om de är giltiga.
Nu hanterar din app navigeringsfel på ett smidigt sätt: istället för att krascha eller visa en tom sida får användaren ett vänligt 404-meddelande med en tydlig väg tillbaka till startsidan.
Din app är nu fullt fungerande och användarvänlig! 🎉 Om du vill ladda ner den kompletta versionen av detta projekt, klicka bara på knappen nedan.
Tack för dina kommentarer!
