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-sivukomponentti, 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 hieman CSS-tyyliä, 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ä, joka ei täsmää aiempiin reitteihin. 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 täsmäävän.
Jokerireitti ({ path: '**' }) on yleisreitti. Se vastaa mitä tahansa polkua, jota aiemmat reitit eivät täsmänneet. Jos sijoitat sen ennen tarkempia reittejä, se nappaa kaiken ja loput reiteistä eivät koskaan täyty—even jos ne ovat kelvollisia.
Nyt sovelluksesi käsittelee navigointivirheet sulavasti: 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 vain alla olevaa painiketta.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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-sivukomponentti, 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 hieman CSS-tyyliä, 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ä, joka ei täsmää aiempiin reitteihin. 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 täsmäävän.
Jokerireitti ({ path: '**' }) on yleisreitti. Se vastaa mitä tahansa polkua, jota aiemmat reitit eivät täsmänneet. Jos sijoitat sen ennen tarkempia reittejä, se nappaa kaiken ja loput reiteistä eivät koskaan täyty—even jos ne ovat kelvollisia.
Nyt sovelluksesi käsittelee navigointivirheet sulavasti: 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 vain alla olevaa painiketta.
Kiitos palautteestasi!
