Databinding

Motivering

Data definerer ofte applikationens udseende. At fortolke disse data i brugergrænsefladen involverer klasselogik ( .component.ts) og en skabelonvisning ( .component.html). Vinkel forbinder dem gennem databinding. Tænk på databinding som et redskab til komponentinteraktion.

Komponent og skabelon

Komponenten gemmer det meste af sin logik og data inden for sin klasse dekoreret med @Component. Denne dekoratør definerer klassen som en komponent med HTML-skabelon. Komponentens skabelon repræsenterer klassen i applikationen. Fokus her skal være mellem komponentens klasse og skabelonens HTML.

Det er her, databinding finder sted. Elementegenskaber og begivenheder får tildelte værdier. Disse værdier defineret af komponentklassen tjener en af ​​to roller. Den ene er at producere data, som skabelonen derefter modtager. Den anden håndterer begivenheder, der udsendes af skabelonelementet.

Prøv at bruge dette billede som en mental model til det næste afsnit.

Kørselsvejledning

Der er to måder, hvorpå data er bundet: ensrettet og tovejs. Vinklet bruger teknisk set kun envejs datastrøm. Tovejs flow er i sidste ende ensrettet. Det sker i to applikationer af ensrettet flow, en gang for hver retning. Mere om det senere.

Envejsflow definerer envejs interaktion. Enten sender komponenten data til skabelonen, eller så udsender skabelonen en begivenhed til komponentlogikken. Dataændringer inden for skabelonens omfang er ikke percolate i komponentklassen. Eventemitting er en envejstransaktion, der starter fra skabelonens elementer.

Tovejs udgør begge retninger. Dette betyder, at ændringer i dataene i klasselogikken eller skabelonen HTML fortsætter på tværs af hinanden. Ændringernes omfang er komponentens opfattelse. Visningen omfatter komponentens klasse og skabelon sammen.

Elementegenskaber

For at genkende data-bundne elementegenskaber bruger Angular en speciel parentes-syntaks.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { value:type = /* some value of type */; }

 innerHTML

Fortæl mig om denne.

[property]spejler ejendommen i Domain Object Model (DOM) -elementets objektnode. Bland ikke objektegenskaber med et DOM-elements attributter. Egenskaber og attributter deler ofte det samme navn og gør det samme. Der er dog en klar skelnen.

Husk, at attr(attributter) er en enkelt egenskab for det underliggende DOM-objekt. Det erklæres ved DOM's instantiering med attributværdier, der matcher elementets definition. Det opretholder den samme værdi efter det. Egenskaber har hver deres nøgleværdifelt i en DOM-objektnode. Disse egenskaber er mutable post-instantiering.

Kend forskellen mellem attributter og egenskaber. Det vil føre til en bedre forståelse af, hvordan Angular binder data til egenskaber (egenskabsbinding). Vinklet vil næsten aldrig binde data til et elements attributter. Undtagelser fra dette er meget sjældne. En sidste gang: Angular binder komponentdata til egenskaber, ikke attributter!

Idet vi henviser til eksemplet, [ … ]har elementets egenskabstildeling særlig betydning. Parenteserne viser, at der propertyer bundet til “value”højre for opgaven.

valuehar også særlig betydning inden for parentesernes sammenhæng. valuei sig selv er en streng bogstavelig. Vinkel læser den og matcher dens værdi i forhold til komponentklassemedlemmer. Vinkel erstatter værdien af ​​den matchende medlemsattribut. Dette refererer naturligvis til den samme komponentklasse, der er vært for skabelonens HTML.

Den ensrettet strøm af data fra komponent til skabelon er komplet. Det medlem, der matches mod den rigtige tildeling af den parentesegenskab, giver value. Bemærk, at ændringer til medlemmets værdi i komponentklassen percolate ned til skabelonen. Det er Angular's detektion af ændringer på arbejdspladsen. Ændringer inden for skabelonens anvendelsesområde har ingen indflydelse på komponentklassemedlemmet.

Key take-away: komponentklassen leverer dataene, mens skabelonen viser dem.

Jeg nævnte ikke, at dataværdier også kan vises i en komponents innerHTML. Dette sidste eksempel implementerer dobbelt krøllede seler. Angular genkender disse seler og interpolerer de matchende komponentklassedata innerHTMLi den div.

 The value of the component class member ‘value’ is {{value}}. 

Håndtering af begivenheder

Hvis komponenten leverer data, leverer skabelonen begivenheder.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { handler(event):void { // function does stuff } }

// my.component.html innerHTML

Dette fungerer på samme måde som ejendomsbinding.

Det (event)gælder enhver gyldig begivenhedstype. For eksempel er en af ​​de mest almindelige begivenhedstyper click. Det udsendes, når du klikker på musen. Uanset hvilken type eventer bundet til “handler”i eksemplet. Begivenhedshåndterere er normalt medlemsfunktioner i komponentklassen.

The ( … ) are special to Angular. Parenthesis tell Angular an event is bounded to the right assignment of handler. The event itself originates from the host element.

When the event does emit, it passes the Event object in the form of $event. The handler maps to the identically named handler function of the component class. The unidirectional exchange from the event-bound element to the component class is complete.

Emitting events from the handler, while possible, do not impact the template element. The binding is unidirectional after all.

Bidirectional Binding

Input forms provide a great example of why bidirectional binding is necessary. Bidirectional data bindings are more costly than event or property bindings.

Tovejs databinding har sit eget modul. Før du kigger på det, skal du overveje følgende eksempel.

// my.component.ts @Component({ templateUrl: './my.component.html' }) export class MyComponent { inputValue:string = ""; handler(event) { this.inputValue = event.target.value; } }

Tid til at nedbryde dette.

Dette eksempel kombinerer de to foregående. Det forklarer, hvorfor det er dyrere. Efter logikken antager brugeren at skrive noget i inputelementet. Elementet udsender en inputbegivenhed til handlerskabelonens komponentklasse. Handleren tildeler klassemedlemmet inputValueværdien af ​​den udsendte begivenhed. Dette afslutter håndtering / binding af begivenheden.

Nu på ejendom bindende. Den inputValuefik en ny værdi. Da det inputValueer bundet til inputelementets, percolererer valuedets ændring i data ned i inputelementets valueegenskab. Inputelementet stemmer valueoverens med inputValue. Dette afslutter ejendomsbinding.

There you have it. Bidirectional data binding happens with both applications of unidirectional binding applied consecutively. The syntax is a bit messy though.

Thankfully, Angular provides NgModel to simplify the syntax. The below example is synonymous to the above.

// my.component.ts @Component({ templateUrl: ‘./my.component.html’ }) export class MyComponent { inputValue:string = ""; }

ngModel is a nice convenience. You have to import the FormsModule in your application’s root before using it. With that squared away, bidirectional data binding becomes much easier to work with.

To reinforce all you have learned, check out this picture from the official Angular Documentation1.

You can visually summarize everything up until this point with this picture. Angular’s Documentation has plenty of other pictures worth seeing. This one should suffice given the scope of this article.

Component to Component

To bind data and events across different components, you must use the @Input and @Output decorators. Angular components are privately scoped. None of a component’s members are accessible from anywhere outside of its native view.

The @Input decorator indicates a member’s value is sourced from the parent function. This requires visualization to better understand.

Notice the passing of the parent’s value member into the child’s property member. This would not be possible if property had no @Input decorator. The Angular compiler depends upon it.

Another example for @Output shows how an event travels from child to parent. Keep in mind that @Output almost always pertains to custom event bindings.

Sørg for at importere EventEmitter, @Inputog @Outputfra, @angular/commonhvis du har til hensigt at replikere et af disse eksempler.

Konklusion

Dette er et godt sted at stoppe. Databinding spænder over en bred vifte af brugssager. Dette emne er værd at udforske nærmere på Angular's hjemmeside. Dette er ikke de eneste måder, hvorpå du kan manipulere data i Angular. Se linkene under Ressourcer for mere information.