Kun komponentti ja sen malli ovat vuorovaikutuksessa, voit siirtää tietoja ja tapahtumia niiden välillä eri tavoin. Tätä kutsutaan tietosidonnaksi.

Angularissa on neljä erilaista tietosidonnan tyyppiä, joista jokaisella on oma käyttötarkoituksensa.

Tarkastellaanpa, miten ne toimivat yksinkertaisen tehtäväkomponentin avulla:

Tässä luodaan task-olio, jolla on kolme ominaisuutta: id, title ja completed. Nämä ominaisuudet kuvaavat tiettyä tehtävää—sen nimeä ja sitä, onko se suoritettu.

Interpolointi

Esimerkiksi, jos sinulla on muuttuja kuten task.title, voit ympäröidä sen {{ }}-merkinnällä, jolloin Angular renderöi sen arvon HTML:ään.

Kun Angular käsittelee mallia, se löytää lausekkeen {{ task.title }} ja korvaa sen komponentin nykyisellä arvolla task.title.

Jos arvo on 'Buy groceries', juuri tämä teksti näkyy <h3>-tagin sisällä. Sama prosessi koskee kaikkia muita arvoja, joita interpoloit.

Interpolointi on siis yksisuuntainen: data kulkee komponentista malliin, ja käyttäjä näkee vain lopputuloksen.

Ominaisuussidonta

Aina ei riitä pelkkä tekstin näyttäminen — joskus haluat ohjata elementin toimintaa, kuten poistaa painikkeen käytöstä, asettaa kuvalähteen tai valita valintaruudun.

Angular mahdollistaa arvojen sitomisen HTML-elementtien ominaisuuksiin hakasulkeiden avulla.

Kuvittele, että tehtävä on jo suoritettu (task.completed = true). Tässä tapauksessa haluamme, että painike on pois käytöstä. Kun Angular näkee [disabled]="task.completed", se ottaa arvon komponentista ja sitoo sen DOM-elementin disabled-ominaisuuteen.

Jos arvo on true, painike poistetaan käytöstä. Jos arvo on false, painike pysyy aktiivisena.

Tämä on jälleen yksisuuntainen sitominen: data kulkee komponentista pohjaan, ja pohja mukautuu task-olion nykytilan mukaan.

Tapahtumasidonta

Jotta sovelluksesi voi reagoida käyttäjän toimintoihin (kuten klikkauksiin), Angular tarjoaa tapahtumasidonnan. Kun käyttäjä on vuorovaikutuksessa elementin kanssa, voit "napata" kyseisen tapahtuman ja kutsua komponentissa olevaa metodia.

Lisätään komponenttiin metodi:

Ja päivitä malli:

Kun käyttäjä napsauttaa painiketta, Angular tunnistaa (click)-tapahtuman ja kutsuu komponentin toggleComplete()-metodia. Tämä metodi vaihtaa task.completed-arvon tilaa. Tämän jälkeen Angular renderöi mallin uudelleen, ja interpoloinnin ({{ task.completed ? 'Undo' : 'Complete' }}) ansiosta painikkeen teksti päivittyy välittömästi.

Tässä tiedonsiirto kulkee yhteen suuntaan — mallista takaisin komponenttiin (toiminto välitetään sisäänpäin).

Kaksisuuntainen sitominen

Joskus halutaan, että muutokset mallissa (esimerkiksi syöttökenttään kirjoittaminen) päivittyvät välittömästi komponenttiin — ja muutokset komponentissa päivittyvät välittömästi malliin. Angular tekee tämän helpoksi kaksisuuntaisella sitomisella käyttäen [(ngModel)]-syntaksia.

Tärkeää: Jotta voit käyttää [(ngModel)], sinun täytyy tuoda FormsModule — kuten alla on esitetty:

Tässä on mallipohja:

Tässä tapahtuu kaksisuuntaisen sidonnan taika. Kun käyttäjä kirjoittaa syötekenttään, Angular päivittää automaattisesti task.title -arvon komponentissa. Ja kun task.title muuttuu komponentissa, Angular heijastaa muutoksen välittömästi syötekenttään.

Toisin kuin muut sidontatyypit, kaksisuuntainen sidonta pitää komponentin ja mallin jatkuvasti synkronoituna.

Keskeiset erot

Jokaisella näistä sidontamenetelmistä on omat ominaisuutensa, ja ne soveltuvat parhaiten erilaisiin tiedon vuorovaikutustilanteisiin sovelluksessa.