Angular-databinding er et vigtigt emne, når det drejer sig om at overføre data mellem komponenter til DOM. I denne artikel vil jeg diskutere envejs og tovejs databinding.
Dette er en unidirektionel databindingsmetode. Hvis vi bruger envejs databinding, kan vi kun binde data fra komponent til visning eller fra visning til komponent. Der er mange forskellige måder, hvorpå vi kan bruge envejs databinding i vores Angular-applikation.
- Interpolationsbinding
Interpolation er en meget almindelig metode, som vi bruger til at binde data i Angular, og det henviser til at binde værdier i UI-elementer.
Som vist i om eksempel kan vi bruge den bundne variabel i HTML-elementer ved at tilføje krøllede parenteser som {{Name}}. Denne metode bruges mest, når vi har brug for at sammenkæde to værdier. f.eks. : {{FirstName}} {{Navn}}}.
2. Property Binding.
Dette er en anden meget anvendt metode til at binde data, og med denne metode kan vi binde værdier fra komponenter til DOM-egenskaberne i HTML-elementerne.
Hvis vi bruger Interpolation i sådanne situationer vil knappen altid blive deaktiveret ved at negligere værdien af variablen.
3. Attributbinding
Attributbinding bruges til at binde en attribut-egenskab for et visningselement. Lad os tage et scenarie, hvor vi skal flette nogle kolonner i en tabel ved hjælp af en colspan-attribut.
Hvis vi bruger værdivariabel som vist i kommentaren eller som en egenskabsbinding, vil det resultere i en fejl. Så vi skal bruge en Attributbinding med start med attr og efterfulgt af en prik og navnet på attributten.
4. Klassebinding
Syntaksen for klassebinding ligner meget Attributbinding, og denne metode bruges til at indstille en klasseegenskab for et visningselement. Ved hjælp af denne bindingsmetode kan vi tilføje CSS-klasser betinget til et element og skabe dynamisk stylede elementer.
CSS-egenskab rød vil kun blive anvendt, når elevkarakterer er lavere end 40. I lighed med Attribute-binding starter Class-binding med nøgleordet class efterfulgt af en prik og et klassens navn.
5. Style Binding
Denne metode ligner også meget de to foregående metoder, og vi kan indstille Style Binding til at indstille inline css-stilarter.
Two-Way Data Binding
Two-Way Data Binding er at etablere en tovejsforbindelse mellem View og komponent, der giver brugerne mulighed for at udveksle data i begge retninger. Tovejs databinding kan nemt opnås ved at bruge (ngModel).
Sørg for at importere FormsModule fra @angular/forms til app.component.ts-filen, hvis du bruger (ngModel).