Opit, kuinka navigointi määritellään oikein Angular-sovelluksessa ja miten tietoa voidaan välittää komponenttien välillä URL-osoitteen avulla.

Meillä on jo kaksi reittiä määriteltynä:

• / — näyttää kaikki tehtävät listana;

• /task/:id — näyttää tietyn tehtävän yksityiskohdat sen ID:n perusteella.

Tavoitteenamme on nyt, että kun käyttäjä napsauttaa painiketta tehtäväkortissa, sovellus siirtyy yksityiskohtasivulle. TaskDetailsComponent hakee tällöin tehtävän ID:n URL-osoitteesta ja käyttää sitä tehtävän täydellisten tietojen hakemiseen.

Kuinka komponentit ovat vuorovaikutuksessa

Määritellään, miten tämä reitityksen vuorovaikutus toimii.

Lisätään painike TaskComponent-komponenttiin. Kun sitä napsautetaan, komponentti lähettää tapahtuman ylöspäin vanhemmalle komponentille (TaskListComponent). Vanhempi käsittelee varsinaisen navigoinnin päivittämällä URL-osoitteen, mikä saa Angularin lataamaan TaskDetailsComponent-komponentin valitulle tehtävälle.

Miksi ei reititetä suoraan TaskComponentista?

Jos haluamme joskus käyttää TaskComponent-komponenttia uudelleen muualla (esim. modaalissa tai toisessa listassa), emme halua sitoa sitä reitityslogiikkaan. Sen sijaan sen tulisi vain ilmoittaa vanhemmalle, että navigointitoimintoa on pyydetty.

Tämä lähestymistapa on helpompi testata ja lukea, pitää reitityslogiikan keskitettynä ja varmistaa, että TaskComponent pysyy selkeänä ja keskittyy omiin tehtäviinsä.

TaskComponentin toteutus

TaskComponent-komponentin päätehtävä on lähettää tapahtumia vanhemmalleen. Lisäämme malliin painikkeen, joka kutsuu navigateToTask()-metodia ja lähettää tapahtuman.

Kun käyttäjä napsauttaa info-painiketta, navigateToTask()-metodi lähettää tehtävän tunnisteen. Tämä tapahtuma vastaanotetaan vanhemmassa komponentissa (TaskListComponent), joka käsittelee navigoinnin Angularin reitittimen avulla.

TaskListComponentin toteutus

Tämä komponentti vastaa siirtymisestä tehtävän yksityiskohtasivulle.

Tätä varten käytetään Angularin sisäänrakennettua Router-palvelua, jonka avulla voidaan ohjelmallisesti muuttaa URL-osoitetta ja ladata oikea komponentti reitin perusteella.

Lisäsimme Router-palvelun konstruktorissa. Angular tarjoaa tämän palvelun automaattisesti komponenttia luodessa, joten lisäasetuksia ei tarvita.

Asetimme myös tapahtumankuuntelijan (onNavigate), joka käynnistää navigateToTask() -metodin.

Kun metodia kutsutaan (esimerkiksi käyttäjä napsauttaa info-painiketta), se muodostaa reitin /task/3, ja reititin päivittää URL-osoitteen sekä lataa TaskDetailsComponent-komponentin.

Tehtävän hakeminen ID:n perusteella TaskDetailsComponentissa

Kun käyttäjä siirtyy reitille /task/:id, Angular lataa TaskDetailsComponent-komponentin. Tämä komponentti vastaa seuraavista asioista:

• Hakee ID:n URL-osoitteesta;

• Etsii vastaavan tehtävän ID:n perusteella;

• Näyttää tehtävän tiedot näytöllä.

Toimintaperiaate on seuraava:

Selitys:

ActivatedRoute-palvelun avulla voimme käyttää nykyisen reitin parametreja.

• Käytämme snapshot.paramMap.get('id') poimiaksemme id-arvon URL-osoitteesta;

• Sitten muunnetaan se numeroksi ja välitetään getTaskById(id)-metodille TaskService-palvelussa tehtävän hakemiseksi;

• goToHomePage()-metodi ohjaa takaisin pääsivulle, jossa koko tehtävälista näytetään.

Näin ollen Angular Routerin avulla olemme onnistuneesti toteuttaneet navigoinnin komponenttien välillä ja siirtäneet tietoa URL-parametrin avulla. TaskListComponent huolehtii navigoinnista tehtävän ID:n perusteella ja TaskDetailsComponent lukee ID:n reitiltä ja lataa vastaavan tehtävän.