Sovelluksen etusivulla käyttäjä näkee luettelon kaikista tehtävistä. Tämä helpottaa nopeasti hahmottamaan, mitä pitää tehdä.

Mutta entä jos käyttäjä haluaa tarkastella tietyn tehtävän yksityiskohtia — sen yksilöllistä ID:tä, tarkkaa otsikkoa ja tilaa? Tätä varten tarvitsemme erillisen tehtävän yksityiskohtasivun.

Tässä luvussa opit rakentamaan TaskDetailsComponent-komponentin, joka avautuu, kun käyttäjä siirtyy tiettyyn URL-osoitteeseen ja näyttää tiedot valitusta tehtävästä.

Uuden komponentin luominen

Tehtävän tietojen näyttämistä varten luomme itsenäisen komponentin. Se toimii erillisenä ja voidaan liittää suoraan reitityskonfiguraatioon.

Suorita tämä komento:

Tämä luo tiedoston task-details.component.ts sekä sen mallin, tyylit ja testit. Voit halutessasi poistaa testitiedoston turvallisesti.

Komponentin toteuttaminen

Tässä vaiheessa tarvitsemme vain tehtävän id:n, otsikon ja tilan — tämä on kaikki tieto, mitä tehtävästä on saatavilla. Lisäämme siis komponenttiin vain task-ominaisuuden.

Seuraavaksi luodaan pohja ja sen CSS-tyylit:

Pohjassa käytetään *ngIf-direktiiviä näyttämään tehtävän tiedot -kortti, jos tehtävä löytyy; muussa tapauksessa näytetään "Task not found" -viesti ng-templatea käyttäen.

Kortin sisällä näytetään tehtävän ID, title ja status, sekä painike paluuta päätehtävälistaan varten (lisätään painikkeen toiminnallisuus myöhemmin).

Nyt TaskDetailsComponent on valmis käytettäväksi. Yhdistämme sen reititykseen seuraavassa luvussa.