Opit määrittämään navigoinnin oikein Angular-sovelluksessasi sekä siirtämään tietoa komponenttien välillä URL-osoitteen avulla.

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

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

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

Tavoitteenamme on nyt, että kun käyttäjä napsauttaa painiketta tehtäväkortissa, sovellus siirtyy yksityiskohtaiselle sivulle. TaskDetailsComponent hakee tällöin tehtävän ID:n URL-osoitteesta ja käyttää sitä noutaakseen tehtävän täydelliset tiedot.

Kuinka komponentit ovat vuorovaikutuksessa

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

Lisätään painike TaskComponent-komponenttiin. Kun sitä klikataan, komponentti lähettää tapahtuman ylätason komponentille (TaskListComponent). Ylätason komponentti huolehtii varsinaisesta navigoinnista 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 esimerkiksi modaalissa tai eri listassa, emme halua sitoa sitä reitityslogiikkaan. Sen sijaan sen tulisi vain ilmoittaa ylätason komponentille, 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 vastuisiinsa.

TaskComponentin toteutus

TaskComponent-komponentin päätehtävä on lähettää tapahtumia ylätason komponentille. 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 (esim. 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 TaskDetailsComponent-komponentissa

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 voidaan käyttää nykyisen reitin parametreja.

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

• Muunnamme sen numeroksi ja välitämme sen getTaskById(id)-metodille TaskService-palvelussa tehtävän hakemiseksi;

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

Näin ollen Angular Routerin avulla olemme onnistuneesti määrittäneet navigoinnin komponenttien välillä ja siirtäneet tietoa URL-parametrin avulla. TaskListComponent hoitaa navigoinnin tehtävän tunnisteen perusteella, ja TaskDetailsComponent lukee tunnisteen reitiltä ja lataa vastaavan tehtävän.