Angularin datan sitominen on tärkeä aihe, kun on kyse tietojen siirtämisestä komponenttien välillä DOM:iin. Tässä artikkelissa käsittelen yksisuuntaista ja kaksisuuntaista datan sitomista.
Tämä on yksisuuntainen datan sitomistapa. Jos käytämme yksisuuntaista tiedon sitomista, voimme sitoa tietoja vain komponentista näkymään tai näkymästä komponenttiin. On monia eri tapoja, joilla voimme käyttää yksisuuntaista datan sitomista Angular-sovelluksessamme.
- Interpolointisidonta
Interpolointi on hyvin yleinen menetelmä, jota käytämme datan sitomiseen Angularissa ja sillä tarkoitetaan arvojen sitomista UI-elementteihin.
Kuten about esimerkissä näytetään, voimme käyttää sidottua muuttujaa HTML-elementeissä lisäämällä siihen sulkeisia kuten {{Name}}. Tätä menetelmää käytetään useimmiten silloin, kun w täytyy ketjuttaa kaksi arvoa. esim : {{Etunimi}} {{Sukunimi}}.
2. Ominaisuuksien sitominen.
Tämä on toinen laajalti käytetty lähestymistapa tietojen sitomiseen ja tällä menetelmällä voimme sitoa komponenttien arvoja HTML-elementtien DOM-ominaisuuksiin.
Jos käytämme Interpolointia tällaisissa tilanteissa painike on aina pois käytöstä laiminlyömällä muuttujan arvon.
3. Attribuuttien sitominen
Attribuuttien sitomista käytetään näkymäelementin attribuuttiominaisuuden sitomiseen. Otetaanpa skenaario, jossa meidän on yhdistettävä joitakin taulukon sarakkeita käyttämällä colspan-attribuuttia.
Jos käytämme arvomuuttujaa kommentissa esitetyllä tavalla tai ominaisuussidontana se johtaa virheeseen. Joten meidän on käytettävä Attribuuttisidontaa, jonka alku on attr ja sen jälkeen piste ja attribuutin nimi.
4. Luokkasidonta
Luokkasidonnan syntaksi on hyvin samankaltainen kuin Attribuuttisidonnan ja tätä menetelmää käytetään näkymäelementin luokkaominaisuuden asettamiseen. Tämän sidontamenetelmän avulla voimme lisätä CSS-luokkia ehdollisesti elementtiin ja luoda dynaamisesti tyyliteltyjä elementtejä.
CSS-ominaisuutta punainen käytetään vain silloin, kun opiskelijan arvosana on alle 40. Attribuuttisidonnan tapaan luokkasidonta alkaa avainsanalla class, jota seuraa piste ja luokan nimi.
5. Style Binding
Tämä menetelmä on myös hyvin samanlainen kuin kaksi edellistä menetelmää, ja voimme asettaa Style Bindingin asettaaksemme inline css-tyylit.
Two-Way Data Binding
Kaksisuuntainen datan sitominen on kaksisuuntaisen yhteyden luominen Näkymän (View) ja Komponentin (Component) välille, mikä mahdollistaa käyttäjille tiedonvaihdon molempiin suuntiin. Kaksisuuntainen datan sitominen onnistuu helposti käyttämällä (ngModel).
Varmista, että tuot FormsModule @angular/forms-tiedostosta app.component.ts-tiedostoon, jos käytät (ngModel).