Vazba dat v Angularu je důležité téma, pokud jde o předávání dat mezi komponentami DOM. V tomto článku se budu zabývat jednosměrnou a obousměrnou vazbou dat.
Jde o jednosměrnou metodu vazby dat. Pokud použijeme jednosměrnou vazbu dat, můžeme data vázat pouze z komponenty do zobrazení nebo ze zobrazení do komponenty. Existuje mnoho různých způsobů, jak můžeme v aplikaci Angular použít jednosměrnou vazbu dat.
- Interpolační vazba
Interpolace je velmi častá metoda, kterou používáme k vazbě dat v aplikaci Angular, a týká se vazby hodnot do prvků uživatelského rozhraní.
Jak je uvedeno v příkladu o můžeme svázanou proměnnou použít v prvcích HTML přidáním kudrnatých závorek, například {{Jméno}}. Tento způsob se většinou používá, když w potřebujeme spojit dvě hodnoty. např : {{FirstName}} {{Příjmení}}.
2. Vazba vlastností.
Jedná se o další hojně používaný přístup k vázání dat a pomocí této metody můžeme vázat hodnoty z komponent do vlastností DOM prvků HTML.
Pokud v takových situacích použijeme tlačítko Interpolace, bude vždy zakázáno zanedbávat hodnotu proměnné.
3. Vazba atributů
Vazba atributů se používá k vazbě vlastnosti atributu prvku zobrazení. Vezměme si scénář, že potřebujeme sloučit některé sloupce v tabulce pomocí atributu colspan.
Pokud použijeme hodnotu proměnné, jak je uvedeno v komentáři, nebo jako vazbu vlastnosti, dojde k chybě. Takže musíme použít atributovou vazbu se začátkem attr a následovanou tečkou a jménem atributu.
4. Vazba třídy
Syntaxe vazby třídy je velmi podobná vazbě atributu a tato metoda se používá k nastavení vlastnosti třídy prvku zobrazení. Pomocí této metody vazby můžeme k prvku podmíněně přidávat třídy CSS a vytvářet tak dynamicky stylizované prvky.
Vlastnost CSS červená bude použita pouze v případě, že známky žáků jsou nižší než 40. Stejně jako vazba na atributy začíná vazba na třídy klíčovým slovem class, za kterým následuje tečka a název třídy.
5. Vazba na třídy se provádí pomocí klíčového slova class, za kterým následuje tečka a název třídy. Vazba stylu
Tato metoda je také velmi podobná předchozím dvěma metodám a můžeme nastavit Vazbu stylu pro nastavení inline stylů css.
Obousměrná vazba dat
Obousměrná vazba dat je vytvoření obousměrného spojení mezi Zobrazením a komponentou, které umožňuje uživatelům vyměňovat data oběma způsoby. Obousměrné datové vazby lze snadno dosáhnout pomocí (ngModel).
Pokud používáte (ngModel), nezapomeňte do souboru app.component.ts importovat modul FormsModule z @angular/forms.
.