Olemattomien Reittien Käsittely Angularissa
Joskus käyttäjät saattavat syöttää väärän URL-osoitteen manuaalisesti tai klikata vanhentunutta linkkiä. Tällaisissa tapauksissa on tärkeää näyttää selkeä "Sivua ei löytynyt" -viesti tyhjän näytön tai teknisen virheen sijaan. Tässä moduulissa luodaan 404-sivun komponentti, määritetään reitit näyttämään se kaikille tuntemattomille poluille ja lisätään viimeisteltyä tyylittelyä.
NotFoundComponent-komponentin luominen
Luodaan uusi Angular-komponentti nimeltä NotFoundComponent, joka toimii 404-sivuna. Se näyttää otsikon, lyhyen virheilmoituksen ja painikkeen, jolla käyttäjä voidaan ohjata takaisin etusivulle.
Suorita seuraava komento komponentin luomiseksi:
Tämä luo automaattisesti not-found-kansion, jossa on neljä tiedostoa. Olet jo tuttu näiden tiedostojen kanssa, ja voit halutessasi poistaa testitiedoston, jos et käytä sitä.
Komponentin rakentaminen
Lisätään HTML, joka näyttää "404"-otsikon, yksinkertaisen viestin ja "Siirry etusivulle" -painikkeen:
not-found-conponent.html
not-found-conponent.css
Tämä on yksinkertainen asettelu, jossa on yksi erityinen osa — goToHome()-metodi. Kun painiketta painetaan, käyttäjä ohjataan etusivulle.
Olemme myös lisänneet CSS-tyylejä, jotta 404-sivu olisi visuaalisesti miellyttävä — keskitetty teksti, huomiota herättävä otsikko ja selkeä, kirkas painike.
Navigointilogiikan lisääminen
Seuraavaksi toteutetaan menetelmä, joka ohjaa käyttäjän takaisin etusivulle.
not-found-conponent.ts
Tässä käytetään Angularin Router-palvelua reittien välillä siirtymiseen manuaalisesti. goToHome()-metodissa käytetään navigate(['/'])-kutsua, joka ohjaa käyttäjän juurireitille.
Kaikkien tuntemattomien reittien käsittely
Seuraavaksi päivitetään sovelluksen reitityskonfiguraatio niin, että NotFoundComponent näytetään kaikille määrittelemättömille poluille.
Lisää seuraava reitti app.routes.ts-tiedoston loppuun:
routes.ts
**-polku on jokerimerkki, joka vastaa mitä tahansa reittiä, jota aiemmat reitit eivät kata. Esimerkiksi siirtyminen osoitteeseen /wrong-url näyttää 404-sivun.
Miksi jokerireitin tulisi aina olla viimeisenä?
Angularissa reittikonfiguraatio käydään läpi järjestyksessä ylhäältä alas. Tämä tarkoittaa, että reititin tarkistaa jokaisen reitin peräkkäin ja pysähtyy löydettyään ensimmäisen osuman.
Jokerireitti ({ path: '**' }) on yleisreitti. Se vastaa mitä tahansa polkua, jota aiemmat reitit eivät kata. Jos sijoitat sen ennen tarkempia reittejä, se nappaa kaiken ja loput reitit eivät koskaan täyty—even jos ne ovat kelvollisia.
Sovelluksesi käsittelee nyt navigointivirheet hallitusti: kaatumisen tai tyhjän ruudun sijaan käyttäjälle näytetään selkeä 404-viesti ja selkeä reitti takaisin etusivulle.
Sovelluksesi on nyt täysin toimiva ja käyttäjäystävällinen! 🎉 Jos haluat ladata tämän projektin täydellisen version, klikkaa alla olevaa painiketta.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.13Olemattomien Reittien Käsittely Angularissa
Pyyhkäise näyttääksesi valikon
Joskus käyttäjät saattavat syöttää väärän URL-osoitteen manuaalisesti tai klikata vanhentunutta linkkiä. Tällaisissa tapauksissa on tärkeää näyttää selkeä "Sivua ei löytynyt" -viesti tyhjän näytön tai teknisen virheen sijaan. Tässä moduulissa luodaan 404-sivun komponentti, määritetään reitit näyttämään se kaikille tuntemattomille poluille ja lisätään viimeisteltyä tyylittelyä.
NotFoundComponent-komponentin luominen
Luodaan uusi Angular-komponentti nimeltä NotFoundComponent, joka toimii 404-sivuna. Se näyttää otsikon, lyhyen virheilmoituksen ja painikkeen, jolla käyttäjä voidaan ohjata takaisin etusivulle.
Suorita seuraava komento komponentin luomiseksi:
Tämä luo automaattisesti not-found-kansion, jossa on neljä tiedostoa. Olet jo tuttu näiden tiedostojen kanssa, ja voit halutessasi poistaa testitiedoston, jos et käytä sitä.
Komponentin rakentaminen
Lisätään HTML, joka näyttää "404"-otsikon, yksinkertaisen viestin ja "Siirry etusivulle" -painikkeen:
not-found-conponent.html
not-found-conponent.css
Tämä on yksinkertainen asettelu, jossa on yksi erityinen osa — goToHome()-metodi. Kun painiketta painetaan, käyttäjä ohjataan etusivulle.
Olemme myös lisänneet CSS-tyylejä, jotta 404-sivu olisi visuaalisesti miellyttävä — keskitetty teksti, huomiota herättävä otsikko ja selkeä, kirkas painike.
Navigointilogiikan lisääminen
Seuraavaksi toteutetaan menetelmä, joka ohjaa käyttäjän takaisin etusivulle.
not-found-conponent.ts
Tässä käytetään Angularin Router-palvelua reittien välillä siirtymiseen manuaalisesti. goToHome()-metodissa käytetään navigate(['/'])-kutsua, joka ohjaa käyttäjän juurireitille.
Kaikkien tuntemattomien reittien käsittely
Seuraavaksi päivitetään sovelluksen reitityskonfiguraatio niin, että NotFoundComponent näytetään kaikille määrittelemättömille poluille.
Lisää seuraava reitti app.routes.ts-tiedoston loppuun:
routes.ts
**-polku on jokerimerkki, joka vastaa mitä tahansa reittiä, jota aiemmat reitit eivät kata. Esimerkiksi siirtyminen osoitteeseen /wrong-url näyttää 404-sivun.
Miksi jokerireitin tulisi aina olla viimeisenä?
Angularissa reittikonfiguraatio käydään läpi järjestyksessä ylhäältä alas. Tämä tarkoittaa, että reititin tarkistaa jokaisen reitin peräkkäin ja pysähtyy löydettyään ensimmäisen osuman.
Jokerireitti ({ path: '**' }) on yleisreitti. Se vastaa mitä tahansa polkua, jota aiemmat reitit eivät kata. Jos sijoitat sen ennen tarkempia reittejä, se nappaa kaiken ja loput reitit eivät koskaan täyty—even jos ne ovat kelvollisia.
Sovelluksesi käsittelee nyt navigointivirheet hallitusti: kaatumisen tai tyhjän ruudun sijaan käyttäjälle näytetään selkeä 404-viesti ja selkeä reitti takaisin etusivulle.
Sovelluksesi on nyt täysin toimiva ja käyttäjäystävällinen! 🎉 Jos haluat ladata tämän projektin täydellisen version, klikkaa alla olevaa painiketta.
Kiitos palautteestasi!
