Angularin Tietosidonnan Tyypit
Kun komponentti ja sen malli ovat vuorovaikutuksessa, voit siirtää tietoja ja tapahtumia niiden välillä eri tavoilla. Tätä kutsutaan tietosidonnaksi.
Angularissa on neljä erilaista tietosidonnan tyyppiä, joista jokaisella on oma käyttötarkoituksensa.
Tarkastellaan, miten nämä toimivat yksinkertaisen tehtäväkomponentin avulla:
task-component.ts
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.
task-component.html
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 yksisuuntaista: 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 kuvan lähteen tai valita valintaruudun.
Angular mahdollistaa arvojen sitomisen HTML-elementtien ominaisuuksiin hakasulkeiden avulla.
task-component.html
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 poistuu 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" tapahtuman ja kutsua komponentissa olevaa metodia.
Lisätään metodi komponenttiin:
task-component.ts
Ja päivitä malli:
task-component.html
Kun käyttäjä napsauttaa painiketta, Angular tunnistaa (click)-tapahtuman ja kutsuu komponentissa olevaa toggleComplete()-metodia. Tämä metodi vaihtaa task.completed-arvon.
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 (kuten syöttökenttään kirjoittaminen) päivittävät komponentin välittömästi — ja muutokset komponentissa päivittävät mallin välittömästi.
Angular tekee tämän helpoksi kaksisuuntaisella sitomisella käyttäen [(ngModel)]-syntaksia.
Tärkeää: Käyttääksesi [(ngModel)], sinun täytyy tuoda FormsModule — kuten alla on esitetty:
task-component.ts
Tässä on mallipohja:
task-component.html
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 muissa sidontatyypeissä, kaksisuuntainen sidonta pitää komponentin ja mallin jatkuvasti synkronoituna.
Keskeiset erot
Jokaisella näistä sidontamenetelmistä on omat ominaisuutensa, ja ne soveltuvat parhaiten erilaisiin tiedonvälitystilanteisiin sovelluksessa.
1. Mitä tietosidontatyyppiä käytetään komponentin muuttujan arvon näyttämiseen mallissa?
2. Mikä tietosidontatyyppi mahdollistaa komponentin muuttujan päivittämisen lomakkeen kautta ja pitää sen synkronoituna mallin syötekentän kanssa?
3. Mitä tietosidontatyyppiä käyttäisit, jotta painike olisi pois käytöstä, kun tehtävä on suoritettu?
4. Mikä tietosidontatyyppi mahdollistaa komponentin metodin käynnistämisen, kun painiketta klikataan?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain the differences between one-way and two-way data binding in Angular?
How do I decide which type of data binding to use in a specific scenario?
Can you give more examples of when to use each binding type?
Awesome!
Completion rate improved to 3.13Angularin Tietosidonnan Tyypit
Pyyhkäise näyttääksesi valikon
Kun komponentti ja sen malli ovat vuorovaikutuksessa, voit siirtää tietoja ja tapahtumia niiden välillä eri tavoilla. Tätä kutsutaan tietosidonnaksi.
Angularissa on neljä erilaista tietosidonnan tyyppiä, joista jokaisella on oma käyttötarkoituksensa.
Tarkastellaan, miten nämä toimivat yksinkertaisen tehtäväkomponentin avulla:
task-component.ts
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.
task-component.html
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 yksisuuntaista: 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 kuvan lähteen tai valita valintaruudun.
Angular mahdollistaa arvojen sitomisen HTML-elementtien ominaisuuksiin hakasulkeiden avulla.
task-component.html
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 poistuu 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" tapahtuman ja kutsua komponentissa olevaa metodia.
Lisätään metodi komponenttiin:
task-component.ts
Ja päivitä malli:
task-component.html
Kun käyttäjä napsauttaa painiketta, Angular tunnistaa (click)-tapahtuman ja kutsuu komponentissa olevaa toggleComplete()-metodia. Tämä metodi vaihtaa task.completed-arvon.
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 (kuten syöttökenttään kirjoittaminen) päivittävät komponentin välittömästi — ja muutokset komponentissa päivittävät mallin välittömästi.
Angular tekee tämän helpoksi kaksisuuntaisella sitomisella käyttäen [(ngModel)]-syntaksia.
Tärkeää: Käyttääksesi [(ngModel)], sinun täytyy tuoda FormsModule — kuten alla on esitetty:
task-component.ts
Tässä on mallipohja:
task-component.html
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 muissa sidontatyypeissä, kaksisuuntainen sidonta pitää komponentin ja mallin jatkuvasti synkronoituna.
Keskeiset erot
Jokaisella näistä sidontamenetelmistä on omat ominaisuutensa, ja ne soveltuvat parhaiten erilaisiin tiedonvälitystilanteisiin sovelluksessa.
1. Mitä tietosidontatyyppiä käytetään komponentin muuttujan arvon näyttämiseen mallissa?
2. Mikä tietosidontatyyppi mahdollistaa komponentin muuttujan päivittämisen lomakkeen kautta ja pitää sen synkronoituna mallin syötekentän kanssa?
3. Mitä tietosidontatyyppiä käyttäisit, jotta painike olisi pois käytöstä, kun tehtävä on suoritettu?
4. Mikä tietosidontatyyppi mahdollistaa komponentin metodin käynnistämisen, kun painiketta klikataan?
Kiitos palautteestasi!
