Håndtering av Ikke-eksisterende Ruter i Angular
Noen ganger kan brukere skrive inn en feil URL manuelt eller klikke på en utdatert lenke. I slike tilfeller er det viktig å vise en tydelig "Siden finnes ikke"-melding i stedet for en tom skjerm eller en teknisk feil. I denne modulen skal vi lage en 404-side-komponent, konfigurere rutene våre til å vise den for alle ukjente stier, og legge til noe gjennomarbeidet stil.
Opprette NotFoundComponent
Vi skal opprette en ny Angular-komponent kalt NotFoundComponent som skal fungere som vår 404-side. Den vil vise en overskrift, en kort feilmelding og en knapp for å omdirigere brukeren tilbake til startsiden.
Kjør følgende kommando for å generere komponenten:
Dette vil automatisk opprette en not-found-mappe med fire filer. Du er allerede kjent med disse filene, og du kan slette testfilen hvis du ikke bruker den.
Bygge komponenten
Legg til HTML for å vise en "404"-tittel, en enkel melding og en "Gå til Hjem"-knapp:
not-found-conponent.html
not-found-conponent.css
Dette er et enkelt oppsett, med én spesiell del — goToHome()-metoden. Når knappen trykkes, blir brukeren omdirigert til startsiden.
Vi har også lagt til noe CSS for å gjøre 404-siden visuelt tiltalende — sentrert tekst, en tydelig overskrift og en ren, lys knapp.
Legge til navigasjonslogikk
Nå implementeres metoden for å navigere brukeren tilbake til startsiden.
not-found-conponent.ts
Her injiseres Angulars Router for å navigere manuelt mellom ruter. I goToHome()-metoden brukes navigate(['/']) for å sende brukeren til rot-ruten.
Håndtering av alle ukjente ruter
Nå skal vi oppdatere appens ruteoppsett slik at NotFoundComponent vises for alle udefinerte stier.
Legg til følgende rute helt nederst i app.routes.ts-filen:
routes.ts
Stien ** er et jokertegn som matcher enhver rute som ikke samsvarer med tidligere definerte ruter. For eksempel vil navigering til /wrong-url vise 404-siden.
Hvorfor bør jokertegnsruten alltid være sist?
I Angular evalueres ruteoppsettet i rekkefølge—fra topp til bunn. Dette betyr at ruteren sjekker hver rute sekvensielt, og når den finner en treff, stopper den søket.
Jokertegnsruten ({ path: '**' }) er en oppsamlingsrute. Den matcher enhver sti som ikke ble matchet av de foregående rutene. Hvis du plasserer den før mer spesifikke ruter, vil den fange opp alt, og resten av rutene vil aldri bli nådd—selv om de er gyldige.
Nå håndterer appen din navigasjonsfeil på en smidig måte: i stedet for å krasje eller vise en tom skjerm, får brukerne en vennlig 404-melding med en tydelig vei tilbake til startsiden.
Appen din er nå fullt funksjonell og brukervennlig! 🎉 Hvis du ønsker å laste ned den komplette versjonen av dette prosjektet, klikker du bare på knappen nedenfor.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
How do I add the HTML for the NotFoundComponent?
Can you explain how to implement the goToHome() method?
Where exactly should I place the wildcard route in my routing configuration?
Awesome!
Completion rate improved to 3.13Håndtering av Ikke-eksisterende Ruter i Angular
Sveip for å vise menyen
Noen ganger kan brukere skrive inn en feil URL manuelt eller klikke på en utdatert lenke. I slike tilfeller er det viktig å vise en tydelig "Siden finnes ikke"-melding i stedet for en tom skjerm eller en teknisk feil. I denne modulen skal vi lage en 404-side-komponent, konfigurere rutene våre til å vise den for alle ukjente stier, og legge til noe gjennomarbeidet stil.
Opprette NotFoundComponent
Vi skal opprette en ny Angular-komponent kalt NotFoundComponent som skal fungere som vår 404-side. Den vil vise en overskrift, en kort feilmelding og en knapp for å omdirigere brukeren tilbake til startsiden.
Kjør følgende kommando for å generere komponenten:
Dette vil automatisk opprette en not-found-mappe med fire filer. Du er allerede kjent med disse filene, og du kan slette testfilen hvis du ikke bruker den.
Bygge komponenten
Legg til HTML for å vise en "404"-tittel, en enkel melding og en "Gå til Hjem"-knapp:
not-found-conponent.html
not-found-conponent.css
Dette er et enkelt oppsett, med én spesiell del — goToHome()-metoden. Når knappen trykkes, blir brukeren omdirigert til startsiden.
Vi har også lagt til noe CSS for å gjøre 404-siden visuelt tiltalende — sentrert tekst, en tydelig overskrift og en ren, lys knapp.
Legge til navigasjonslogikk
Nå implementeres metoden for å navigere brukeren tilbake til startsiden.
not-found-conponent.ts
Her injiseres Angulars Router for å navigere manuelt mellom ruter. I goToHome()-metoden brukes navigate(['/']) for å sende brukeren til rot-ruten.
Håndtering av alle ukjente ruter
Nå skal vi oppdatere appens ruteoppsett slik at NotFoundComponent vises for alle udefinerte stier.
Legg til følgende rute helt nederst i app.routes.ts-filen:
routes.ts
Stien ** er et jokertegn som matcher enhver rute som ikke samsvarer med tidligere definerte ruter. For eksempel vil navigering til /wrong-url vise 404-siden.
Hvorfor bør jokertegnsruten alltid være sist?
I Angular evalueres ruteoppsettet i rekkefølge—fra topp til bunn. Dette betyr at ruteren sjekker hver rute sekvensielt, og når den finner en treff, stopper den søket.
Jokertegnsruten ({ path: '**' }) er en oppsamlingsrute. Den matcher enhver sti som ikke ble matchet av de foregående rutene. Hvis du plasserer den før mer spesifikke ruter, vil den fange opp alt, og resten av rutene vil aldri bli nådd—selv om de er gyldige.
Nå håndterer appen din navigasjonsfeil på en smidig måte: i stedet for å krasje eller vise en tom skjerm, får brukerne en vennlig 404-melding med en tydelig vei tilbake til startsiden.
Appen din er nå fullt funksjonell og brukervennlig! 🎉 Hvis du ønsker å laste ned den komplette versjonen av dette prosjektet, klikker du bare på knappen nedenfor.
Takk for tilbakemeldingene dine!
