Vezanje podataka

Motivacija

Podaci često definiraju izgled aplikacije. Tumačenje tih podataka u korisničkom sučelju uključuje logiku klase ( .component.ts) i prikaz predloška ( .component.html). Kutni ih povezuje povezivanjem podataka. Zamislite vezivanje podataka kao alat za interakciju komponenata.

Komponenta i predložak

Komponenta pohranjuje većinu svoje logike i podataka unutar svoje klase ukrašene @Component. Ovaj uređivač definira klasu kao komponentu s HTML predloškom. Predložak komponente predstavlja klasu unutar aplikacije. Ovdje fokus mora biti između klase komponente i HTML predloška.

Tu se događa vezivanje podataka. Svojstva i događaji elementa dobivaju dodijeljene vrijednosti. Te vrijednosti, definirane razredom komponenata, služe bilo jednoj od dvije uloge. Jedno je stvaranje podataka koje predložak zatim prima. Drugi obrađuje događaje koje emitira element predloška.

Pokušajte koristiti ovu sliku kao mentalni model za sljedeći odjeljak.

Upute za vezivanje

Postoje dva načina na koja su podaci vezani: jednosmjerni i dvosmjerni. Angular tehnički koristi samo jednosmjerni protok podataka. Dvosmjerni tok u konačnici je jednosmjeran. To se događa u dvije primjene jednosmjernog toka, jednom za svaki smjer. O tome više kasnije.

Jednosmjerni tok definira jednosmjernu interakciju. Komponenta šalje podatke predlošku ili predložak emitira događaj u logiku komponente. Promjene podataka unutar opsega predloška ne odnose se na klasu komponenata. Emitiranje događaja je jednosmjerna transakcija koja započinje od elemenata predloška.

Dvosmjerno čini oba smjera. To znači da se promjene podataka u logici klase ili HTML-u predloška nastavljaju međusobno. Opseg promjena je pogled na komponentu. Pogled sadrži klasu i predložak komponente zajedno.

Svojstva elementa

Da bi prepoznao svojstva elemenata vezanih za podatke, Angular koristi posebnu sintaksu zagrada.

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

 innerHTML

Izdrži sa mnom na ovome.

[property]preslikava svojstvo u objektnom čvoru elementa Domain Object Model (DOM). Nemojte brkati svojstva objekta s atributima DOM elementa. Svojstva i atributi često imaju isto ime i čine isto. Međutim, postoji jedna jasna razlika.

Imajte na umu da je attr(atributi) jedno svojstvo osnovnog DOM objekta. Deklarira se u instanciji DOM-a s vrijednostima atributa koje odgovaraju definiciji elementa. Nakon toga zadržava istu vrijednost. Svojstva imaju svoje polje ključ / vrijednost u čvoru DOM objekta. Ova svojstva su promjenjiva nakon instancije.

Znati razliku između atributa i svojstava. Dovest će do boljeg razumijevanja kako Angular veže podatke za svojstva (vezivanje svojstava). Angular će teško ikad povezati podatke s atributima elementa. Izuzeci od toga su vrlo rijetki. Posljednji put: Angular veže podatke komponenata na svojstva, a ne na atribute!

Osvrćući se na primjer, [ … ]dodjela svojstva elementa ima posebno značenje. U zagradama se vidi ono što propertyje vezano s “value”desne strane zadatka.

valuetakođer ima posebno značenje u kontekstu zagrada. valuesam po sebi je doslovni niz. Angular ga čita i podudara njegovu vrijednost s pripadnicima klase komponenata. Angular će zamijeniti vrijednost atributa odgovarajućeg člana. To se naravno odnosi na istu klasu komponenata koja je domaćin predlošku HTML.

Jednosmjerni tok podataka od komponente do predloška je dovršen. Član koji se podudara s pravom dodjelom zagrade u zagradama pruža value. Imajte na umu da se promjene vrijednosti člana u klasi komponenata prenose do predloška. To je otkrivanje promjena na poslu tvrtke Angular. Promjene unutar opsega predloška nemaju utjecaja na člana klase komponente.

Uklanjanje ključa: klasa komponente pruža podatke dok ih predložak prikazuje.

Propustio sam spomenuti da se vrijednosti podataka mogu prikazati i u komponentama innerHTML. Ovaj posljednji primjer primjenjuje dvostruke kovrčave zagrade. Kutna prepoznaje te aparatić i interpolira komponentu podataka klase slične Into the innerHTMLod div.

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

Rukovanje događajima

Ako komponenta isporučuje podatke, predložak daje događaje.

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

// my.component.html innerHTML

To djeluje slično kao vezivanje svojstava.

Na (event)odnosi i na bilo koji valjani tip događaja. Na primjer, jedna od najčešćih vrsta događaja je click. Emitira kad kliknete mišem. Bez obzira na vrstu, eventvezan je “handler”u primjeru. Obrađivači događaja obično su funkcije člana klase komponenata.

( … )Su posebne kutnom. Zagrade kažu Angular da je događaj ograničen na pravu dodjelu handler. Sam događaj potječe od elementa domaćina.

Kada događaj emitira, prosljeđuje objekt Event u obliku $event. handlerKarata za istoimene handlerfunkcije komponente klase. Jednosmjerna razmjena od elementa vezanog za događaj do klase komponenata je završena.

Emitiranje događaja iz voditelja, iako je moguće, ne utječe na element predloška. Veza je ipak jednosmjerna.

Dvosmjerno vezivanje

Obrasci za unos pružaju sjajan primjer zašto je dvosmjerno vezivanje neophodno. Dvosmjerne veze podataka skuplje su od veza događaja ili svojstava.

Dvosmjerno vezivanje podataka ima svoj modul. Prije nego što to pogledate, razmotrite sljedeći primjer.

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

Vrijeme je da se ovo razbije.

Ovaj primjer kombinira prethodna dva. To objašnjava zašto je skuplje. Slijedeći logiku, pretpostavimo da korisnik nešto upiše u ulazni element. Element emitira inputdogađaj u handlerklasu komponente predloška. Voditelj dodjeljuje članu klase inputValuevrijednost emitiranog događaja. Ovim se završava rukovanje događajem / vezivanje događaja.

Sada na vezivanje imovine. inputValueJe dodijeljen novu vrijednost. Budući da inputValueje vezan za ulazni element value, njegova promjena podataka pretače se u valuesvojstvo ulaznog elementa . Ulazni element valueodgovara inputValue. Time je zaključeno obvezivanje imovine.

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.

Obavezno uvezite EventEmitter, @Inputi @Outputfrom @angular/commonako namjeravate replicirati bilo koji od ovih primjera.

Zaključak

Ovo je dobro mjesto za zaustavljanje. Vezanje podataka obuhvaća širok spektar slučajeva korištenja. Ovu temu vrijedi istražiti na web mjestu Angular. To nisu jedini načini kojima možete manipulirati podacima u Angulu. Pogledajte poveznice pod Resursi za više informacija.