Kuinka ne ovat yhteydessä?

TaskListComponent hallinnoi tehtävien taulukkoa, jossa jokainen tehtävä on olio, jolla on kentät id, title ja completed. Jokaisen tehtävän näyttämiseen käytämme TaskComponent-komponenttia.

Lisäksi TaskComponent kommunikoi vanhemman komponenttinsa kanssa käyttäjän toimista, kuten kun tehtävä poistetaan tai merkitään valmiiksi. Tämä vuorovaikutus tapahtuu tapahtumien lähettämisen kautta.

TaskListComponent-logiikan toteutus

Luodaan komponentti, joka vastaa tehtävälistan hallinnasta. Sen sisällä määritellään tehtävien taulukko ja lisätään kaksi metodia — deleteTask() ja toggleStatus() — tehtävien hallintaan.

• Tehtävälista (tasks) hallitaan komponentin sisällä, jolloin TaskListComponent toimii keskusohjaimena;
• deleteTask()-metodi suodattaa tehtävän pois sen id:n perusteella;
• toggleStatus()-metodi etsii tehtävän id:n perusteella ja vaihtaa sen completed-tilan.

Tämä koodi käyttää *ngFor-direktiiviä silmukoimaan tasks-taulukon läpi ja luomaan jokaiselle tehtävälle oman TaskComponent-komponentin. Seuraavassa osiossa tarkastellaan tarkemmin, miten *ngFor toimii.

• [task]="task" — välittää nykyisen tehtävän lapsikomponentille, jotta se voi näyttää sen;

• (onDelete)="deleteTask($event)" — kuuntelee lapsikomponentin onDelete-tapahtumaa ja kutsuu deleteTask()-metodia poistaakseen tehtävän;

• (onToggle)="toggleStatus($event)" — kuuntelee onToggle-tapahtumaa ja kutsuu toggleStatus()-metodia muuttaakseen tehtävän tilaa.

Dekoraattorit: @Input() ja @Output()

Nyt on aika yhdistää TaskComponent ja TaskListComponent, ja siihen käytetään dekoraattoreita @Input() ja @Output().

Angularissa @Input() ja @Output() -dekoraattorit ovat keskeisiä työkaluja komponenttien välisessä viestinnässä. Niiden avulla voidaan välittää dataa komponenttiin ja lähettää tapahtumia ulos komponentista. Tässä lyhyt yhteenveto:

Tässä on esimerkki siitä, miten ne toimivat TaskComponent-komponentissa:

Tässä tapauksessa task on olio, joka välitetään vanhemmalta TaskListComponent-komponentilta TaskComponent-komponentille.

Kun käyttäjä poistaa tehtävän tai vaihtaa sen tilaa, TaskComponent lähettää tapahtumia, joita vanhempi komponentti kuuntelee.

@Output() ja EventEmitter käytetään ilmoittamaan vanhemmalle komponentille, kun lapsikomponentissa tapahtuu jotain. Näiden dekorointien avulla lapsikomponentti voi välittää toimintoja, kuten tehtävien poistot tai tilamuutokset, vanhemmalle komponentille.

deleteTask()-metodia kutsutaan, kun käyttäjä haluaa poistaa tehtävän. Se lähettää tehtävän id:n, jolloin vanhempi voi poistaa tehtävän listaltaan.

toggleTask()-metodi vaihtaa tehtävän suoritetun tilan ja ilmoittaa tästä muutoksesta vanhemmalle komponentille.

Miten kaikki toimii yhdessä

1. TaskListComponent välittää tehtävän TaskComponent-komponentille käyttäen @Input()-dekorointia;

2. Käyttäjä on vuorovaikutuksessa tehtävän kanssa (esimerkiksi klikkaa "Poista");

3. TaskComponent lähettää tapahtuman (onDelete tai onToggle) tehtävän id:n kanssa;

4. TaskListComponent vastaanottaa tapahtuman ja päivittää tehtävälistan;

5. Angular päivittää käyttöliittymän automaattisesti päivitetyn datan perusteella.

Näin @Input() ja @Output() mahdollistavat selkeän ja tehokkaan viestinnän komponenttien välillä, pitäen rakenteen järjestelmällisenä ja reaktiivisena.