Legarea datelor

Motivație

Datele definesc adesea aspectul unei aplicații. Interpretarea acestor date în interfața cu utilizatorul implică logica clasei (.component.ts) și o vizualizare șablon (.component.html). Unghiulare le conectează prin legarea datelor. Gândiți-vă la legarea datelor ca la un instrument pentru interacțiunea componentelor.

Componentă și șablon

Componenta stochează majoritatea logicii și datelor sale în interiorul clasei sale decorate cu @Component. Acest decorator definește clasa ca o componentă cu șablon HTML. Șablonul componentei reprezintă clasa din cadrul aplicației. Focalizarea aici trebuie să fie între clasa componentei și șablonul HTML.

Aici are loc legarea datelor. Proprietățile elementelor și evenimentele primesc valori atribuite. Aceste valori, definite de clasa componentelor, îndeplinesc unul dintre cele două roluri. Una este să produci date pe care șablonul le primește apoi. Celălalt gestionează evenimentele emise de elementul șablon.

Exemplu de cod

Încercați să utilizați această imagine ca model mental pentru următoarea secțiune.

Instrucțiuni de legare

Există două moduri în care datele sunt legate: unidirecțional și bidirecțional. Unghiular utilizează tehnic doar fluxul de date unidirecțional. Fluxul bidirecțional este în cele din urmă unidirecțional. Se întâmplă în două aplicații ale fluxului unidirecțional, o dată pentru fiecare direcție. Mai multe despre asta mai târziu.

Fluxul unidirecțional definește interacțiunea unidirecțională. Fie componenta trimite date către șablon, fie șablonul emite un eveniment logicii componentei. Modificările de date din sfera șablonului nu sunt incluse în clasa componentelor. Emiterea de evenimente este o tranzacție cu sens unic care începe de la elementele șablonului.

Bidirecțională constituie ambele direcții. Acest lucru înseamnă că modificările aduse datelor din logica clasei sau șablonul HTML persistă una peste alta. Scopul modificărilor este viziunea componentei. Vizualizarea cuprinde clasa și șablonul componentei împreună.

Proprietăți element

Pentru a recunoaște proprietățile elementelor legate de date, Angular folosește o sintaxă specială între paranteze.

// my.component.ts
@Component({
  templateUrl: './my.component.html'
})

export class MyComponent {
  value:type = /* some value of type */;
}
<!-- my.component.html -->
<any-element [property]=“value”>innerHTML</any-element>

Fii cu mine pe asta.

[property] oglindește proprietatea din nodul de obiect al elementului modelului de domeniu (DOM). Nu confundați proprietățile obiectului cu atributele unui element DOM. Proprietățile și atributele au adesea același nume și fac același lucru. Cu toate acestea, există o distincție clară.

Sa nu uiti asta attr (atribute) este o singură proprietate a obiectului DOM subiacent. Este declarat la instanțierea DOM cu valori ale atributelor care se potrivesc cu definiția elementului. Menține aceeași valoare după aceea. Fiecare proprietate are propriul câmp valoare-cheie într-un nod obiect DOM. Aceste proprietăți sunt post-instantanee mutabile.

Cunoașteți diferența dintre atribute și proprietăți. Aceasta va duce la o mai bună înțelegere a modului în care Angular leagă datele de proprietăți (legarea proprietății). Angular nu va lega niciodată datele de atributele unui element. Excepțiile la acest lucru sunt foarte rare. Ultima dată: unghiular leagă datele componente de proprietăți, nu de atribute!

Referindu-ne la exemplu, [ … ] în atribuirea proprietății elementului au o semnificație specială. Parantezele arată că property este legat de “value” în dreapta misiunii.

value are, de asemenea, o semnificație specială în contextul parantezelor. value în sine este un literal șir. Unghiular îl citește și îi corespunde valoarea cu membrii clasei componente. Angular va înlocui valoarea atributului membru care se potrivește. Aceasta se referă, desigur, la aceeași clasă de componente care găzduiește șablonul HTML.

Fluxul unidirecțional de date de la componentă la șablon este complet. Membrul asociat cu atribuirea corectă a proprietății între paranteze oferă value. Rețineți că modificările valorii membrului din clasa componentelor se filtrează până la șablon. Aceasta este detectarea schimbărilor Angular la locul de muncă. Modificările din domeniul de aplicare al șablonului nu au efect asupra membrului clasei componente.

Take-away cheie: clasa componentelor furnizează datele în timp ce șablonul le afișează.

Nu am reușit să menționez că valorile datelor pot apărea și în componentele componentei innerHTML. Acest ultim exemplu implementează acolade duble. Angular recunoaște aceste acolade și interpolează datele din clasa componentelor potrivite în innerHTML din div.

<div>The value of the component class member ‘value’ is {{value}}.</div>

Gestionarea evenimentelor

Dacă componenta furnizează date, atunci șablonul furnizează evenimente.

// my.component.ts
@Component({
  templateUrl: './my.component.html'
})

export class MyComponent {
  handler(event):void {
      // function does stuff
  }
}
// my.component.html
<any-element (event)=“handler($event)”>innerHTML</any-element>

Acest lucru funcționează similar cu legarea proprietății.

(event) se referă la orice tip de eveniment valid. De exemplu, unul dintre cele mai frecvente tipuri de evenimente este click. Emite când tu clic mouse-ul tău. Indiferent de tip, event este legat de “handler” în exemplu. Handlerele de evenimente sunt de obicei funcții membre ale clasei de componente.

( … ) sunt speciale pentru Angular. Paranteza îi spune lui Angular că un eveniment este legat de atribuirea corectă a handler. Evenimentul în sine provine din elementul gazdă.

Când evenimentul emite, acesta trece obiectul Eveniment sub forma $event. handler hărți către numele identic handler funcția clasei de componente. Schimbul unidirecțional de la elementul legat de eveniment la clasa de componente este complet.

Emiterea de evenimente din handler, deși este posibil, nu afectează elementul șablon. La urma urmei, legarea este unidirecțională.

Legare bidirecțională

Formularele de introducere oferă un exemplu excelent de ce este necesară legarea bidirecțională. Legările de date bidirecționale sunt mai costisitoare decât legările de evenimente sau proprietăți.

Legarea bidirecțională a datelor are un modul propriu. Înainte de a arunca o privire la asta, luați în considerare următorul exemplu.

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

  handler(event) {
      this.inputValue = event.target.value;
  }
}
<!-- my.component.html -->
<input (input)=“handler($event)” [value]=“inputValue”>

E timpul să descompunem asta.

Acest exemplu combină cele două precedente. Asta explică de ce este mai costisitor. Urmând logica, presupuneți că utilizatorul tastează ceva în elementul de intrare. Elementul emite un input eveniment la handler a clasei de componente a șablonului. Handlerul atribuie membrul clasei inputValue la valoarea evenimentului emis. Aceasta încheie gestionarea / legarea evenimentului.

Acum pe legătura proprietății. inputValue i s-a atribuit o nouă valoare. De cand inputValue este legat de elementul de intrare value, modificarea sa în date se filtrează în elementul de intrare value proprietate. Elementul de intrare value se potrivește cu inputValue. Aceasta încheie obligativitatea proprietății.

Iată-l. Legarea bidirecțională a datelor se întâmplă cu ambele aplicații de legare unidirecțională aplicate consecutiv. Sintaxa este însă cam dezordonată.

Din fericire, Angular oferă NgModel pentru a simplifica sintaxa. Exemplul de mai jos este sinonim cu cel de mai sus.

// my.component.ts
@Component({
  templateUrl: ‘./my.component.html’
})

export class MyComponent {
  inputValue:string = "";
}
<!-- my.component.html -->
<input [(ngModel)]=“inputValue”>

ngModel este o comoditate plăcută. Trebuie să importați FormsModule în rădăcina aplicației dvs. înainte de a-l utiliza. Odată cu acest lucru la distanță, legarea bidirecțională a datelor devine mult mai ușor de lucrat.

Pentru a întări tot ce ați învățat, consultați această imagine de la oficial Documentație unghiulară1.

Diagrama fluxului de date

Puteți rezuma vizual totul până în acest moment cu această imagine. Documentația Angular are o mulțime de alte imagini demne de văzut. Acesta ar trebui să fie suficient, având în vedere domeniul de aplicare al acestui articol.

Componentă la componentă

Pentru a lega date și evenimente între diferite componente, trebuie să utilizați decoratorii @Input și @Output. Componentele unghiulare au scop privat. Niciunul dintre membrii unei componente nu este accesibil de oriunde în afara vederii sale native.

Decoratorul @Input indică faptul că valoarea unui membru provine din funcția părinte. Acest lucru necesită vizualizare pentru a înțelege mai bine.

Exemplu de cod

Observați trecerea celui al părinților value membru în copil property membru. Acest lucru nu ar fi posibil dacă property nu avea decorator @Input. Compilatorul angular depinde de acesta.

Un alt exemplu pentru @Output arată cum un eveniment se deplasează de la copil la părinte. Rețineți că @Output se referă aproape întotdeauna la legăturile de evenimente personalizate.

Exemplu de cod

Asigurați-vă că importați EventEmitter, @Input, și @Output din @angular/common dacă intenționați să reproduceți oricare dintre aceste exemple.

Concluzie

Acesta este un loc bun de oprire. Legarea datelor acoperă o gamă largă de cazuri de utilizare. Acest subiect merită explorat mai departe Site-ul Angular. Acestea nu sunt singurele modalități prin care puteți manipula datele în Angular. Consultați linkurile din Resurse pentru mai multe informații.