Reitityksen Määrittäminen Angularissa
Jotta kaikki toimisi, sinun täytyy kertoa Angularille, mikä URL näyttää minkäkin komponentin. Tätä kutsutaan reititykseksi. Aloitetaan!
Pääasiallinen reititystiedosto
Kun luot Angular-sovelluksen CLI:n avulla, voit ottaa reitityksen käyttöön heti alussa — vastaa vain "Kyllä" kun kysytään reitityksestä. Angular luo tällöin tarvittavat tiedostot puolestasi (kuten teimme jo sovellusta luodessa). Yksi näistä tiedostoista on app.routes.ts.
Jos tätä tiedostoa ei jostain syystä ole, ei hätää — voit luoda sen itse projektisi juurikansioon. Sen tulisi näyttää tältä:
routes.ts
Tämä tiedosto määrittää Angularille, mitkä reitit sovelluksessasi ovat käytettävissä ja mitkä komponentit näytetään kullekin reitille.
Varmista myös, että reitit on yhdistetty tiedostossa app.config.ts seuraavasti:
config.ts
Ilman riviä provideRouter(routes) Angular ei tunnista reittejäsi, vaikka ne olisi määritelty tiedostossa app.routes.ts.
Reittien määrittäminen
Lisätään nyt reitit Task Tracker -sovellukseen. Avaa app.routes.ts ja kirjoita seuraava koodi:
routes.ts
Tämä on vain taulukko reiteistä, jonka viemme ulos. Jokainen reitti on olio, jolla on seuraavat asetukset:
-
path— URL-polku; -
component— komponentti, joka näytetään kyseisellä polulla.
Tässä tapauksessa meillä on kaksi reittiä:
Pääsivu, joka näyttää tehtäväluettelon.
routes.ts
Kun käyttäjä vierailee juuriosoitteessa (localhost:4200/), Angular näyttää TaskListComponent-komponentin.
Tehtävän yksityiskohtasivu, joka näyttää tiedot yksittäisestä tehtävästä:
routes.ts
Tässä :id on dynaaminen parametri. Angular ymmärtää, että :id voi olla mikä tahansa arvo (kuten /task/1, /task/42 jne.). Tämä arvo välitetään automaattisesti TaskDetailsComponent-komponentille, ja sitä voidaan käyttää kyseisen tehtävän tietojen hakemiseen.
Kun käyttäjä siirtyy osoitteeseen localhost:4200/task/1, Angular näyttää TaskDetailsComponent-komponentin, jossa on tehtävän №1 tiedot.
Tällä hetkellä mikään ei vielä toimi, koska olemme vain määritelleet reitit, mutta emme ole vielä yhdistäneet niitä täysin komponentteihin. Tehdään se seuraavassa luvussa!
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 3.13Reitityksen Määrittäminen Angularissa
Pyyhkäise näyttääksesi valikon
Jotta kaikki toimisi, sinun täytyy kertoa Angularille, mikä URL näyttää minkäkin komponentin. Tätä kutsutaan reititykseksi. Aloitetaan!
Pääasiallinen reititystiedosto
Kun luot Angular-sovelluksen CLI:n avulla, voit ottaa reitityksen käyttöön heti alussa — vastaa vain "Kyllä" kun kysytään reitityksestä. Angular luo tällöin tarvittavat tiedostot puolestasi (kuten teimme jo sovellusta luodessa). Yksi näistä tiedostoista on app.routes.ts.
Jos tätä tiedostoa ei jostain syystä ole, ei hätää — voit luoda sen itse projektisi juurikansioon. Sen tulisi näyttää tältä:
routes.ts
Tämä tiedosto määrittää Angularille, mitkä reitit sovelluksessasi ovat käytettävissä ja mitkä komponentit näytetään kullekin reitille.
Varmista myös, että reitit on yhdistetty tiedostossa app.config.ts seuraavasti:
config.ts
Ilman riviä provideRouter(routes) Angular ei tunnista reittejäsi, vaikka ne olisi määritelty tiedostossa app.routes.ts.
Reittien määrittäminen
Lisätään nyt reitit Task Tracker -sovellukseen. Avaa app.routes.ts ja kirjoita seuraava koodi:
routes.ts
Tämä on vain taulukko reiteistä, jonka viemme ulos. Jokainen reitti on olio, jolla on seuraavat asetukset:
-
path— URL-polku; -
component— komponentti, joka näytetään kyseisellä polulla.
Tässä tapauksessa meillä on kaksi reittiä:
Pääsivu, joka näyttää tehtäväluettelon.
routes.ts
Kun käyttäjä vierailee juuriosoitteessa (localhost:4200/), Angular näyttää TaskListComponent-komponentin.
Tehtävän yksityiskohtasivu, joka näyttää tiedot yksittäisestä tehtävästä:
routes.ts
Tässä :id on dynaaminen parametri. Angular ymmärtää, että :id voi olla mikä tahansa arvo (kuten /task/1, /task/42 jne.). Tämä arvo välitetään automaattisesti TaskDetailsComponent-komponentille, ja sitä voidaan käyttää kyseisen tehtävän tietojen hakemiseen.
Kun käyttäjä siirtyy osoitteeseen localhost:4200/task/1, Angular näyttää TaskDetailsComponent-komponentin, jossa on tehtävän №1 tiedot.
Tällä hetkellä mikään ei vielä toimi, koska olemme vain määritelleet reitit, mutta emme ole vielä yhdistäneet niitä täysin komponentteihin. Tehdään se seuraavassa luvussa!
Kiitos palautteestasi!
