Az Angular adatkötés fontos téma, amikor a komponensek közötti adatátadásról van szó a DOM-ban. Ebben a cikkben az egyirányú és a kétirányú adatkötést fogom tárgyalni.
Ez egy egyirányú adatkötési módszer. Ha egyirányú adatkötést használunk, akkor csak a komponensből a nézethez vagy a nézetből a komponenshez köthetünk adatokat. Sokféle módon használhatjuk az egyirányú adatkötést az Angular alkalmazásunkban.
- Interpolációs kötés
Az interpoláció egy nagyon gyakori módszer, amit az adatok kötésére használunk az Angularban, és ez az értékek UI elemekbe való kötésére vonatkozik.
Amint a körülbelül példában látható, a megkötött változót HTML elemekben használhatjuk a görbe zárójelek hozzáadásával, mint például {{Name}}. Ezt a módszert leginkább akkor használjuk, amikor két értéket kell összekapcsolnunk. pl. : {{FirstName}} {{Végnév}}.
2. Property Binding.
Ez egy másik széles körben használt megközelítés az adatok kötésére, és ezzel a módszerrel a HTML elemek DOM tulajdonságaiba köthetjük a komponensek értékeit.
Ha ilyen helyzetekben az Interpoláció gombot használjuk, akkor a változó értékét elhanyagolva mindig ki lesz kapcsolva.
3. Attribútumkötés
Az attribútumkötést egy nézetelem attribútum tulajdonságának megkötésére használjuk. Vegyünk egy olyan forgatókönyvet, hogy össze kell vonnunk néhány oszlopot egy táblázatban a colspan attribútum segítségével.
Ha a megjegyzésben látható módon értékváltozót használunk, vagy tulajdonságkötésként hibát fog eredményezni. Ezért egy attribútumkötést kell használnunk, amely attr-rel kezdődik, majd egy pont és az attribútum neve következik.
4. Osztálykötés
Az osztálykötés szintaxisa nagyon hasonló az attribútumkötéshez, és ezt a módszert egy nézetelem osztálytulajdonságának beállítására használjuk. Ennek a kötési módszernek a használatával feltételesen CSS-osztályokat adhatunk egy elemhez, dinamikusan stilizált elemeket hozva létre.
A piros CSS-tulajdonság csak akkor kerül alkalmazásra, ha a tanuló jegye 40-nél alacsonyabb. Az attribútumkötéshez hasonlóan az osztálykötés is a class kulcsszóval kezdődik, amelyet egy pont és az osztály neve követ.
5. Stíluskötés
Ez a módszer is nagyon hasonlít az előző két módszerhez, és a Stíluskötést beállíthatjuk az inline css stílusok beállításához.
Kétirányú adatkötés
A kétirányú adatkötés kétirányú kapcsolatot létesít a View és a komponens között, lehetővé téve a felhasználók számára az adatcserét mindkét irányban. A kétirányú adatkötés könnyen megvalósítható az (ngModel) használatával.
Kérlek, győződj meg róla, hogy a FormsModule-t a @angular/forms fájlból importálod az app.component.ts fájlba, ha az (ngModel-t használod.