evenimente componente cu EventEmitter și @ Output în Angular

componentele unghiulare sunt blocurile fundamentale ale arhitecturii. Odată ce ați înțeles arhitectura componentelor, puteți construi o imagine în cap cu privire la modul de asamblare a interfeței pe baza comunicării de date.

în acest post vom arunca cu capul în componente unghiulare și modul de utilizare EventEmitter și ieșiri, astfel încât să putem transfera sau notifica orice componentă părinte că ceva sa schimbat, sau ne-ar dori să-l schimbe. Acest lucru se face de obicei prin “evenimente”, de unde și “EventEmitter” și este proiectat în jurul unui sistem de flux de date unidirecțional care adoptă o abordare mult mai rezonabilă a dezvoltării aplicațiilor.

să finalizăm elementele de bază ale comunicării părinte-copil și copil-părinte prin introducerea EventEmitterși @Output.

seria

1. Bootstrapping prima aplicație unghiulară
2. crearea primei componente unghiulare
3. trecerea datelor în componente unghiulare cu @input
4. evenimente componente cu EventEmitter și @Output în unghiular

Introducere

acest tutorial va acoperi evenimente componente apatrizi folosind EventEmitter API și @Output decorator. Acestea ne permit să emitem modificări sau orice nume de evenimente personalizate dintr-o componentă personalizată în Angular.

această postare rezultă din articolul anterior despre transmiterea datelor în componente unghiulare cu @Input, așa că asigurați-vă că citiți mai întâi!

Stateful (părinte) componenta de legare

la fel ca în tutorialul anterior, în cazul în care am de configurare un @Input decorator pentru a accepta o legare de intrare, putem face același lucru și asculta în părinte pentru atunci când o valoare se schimbă în interiorul componentei noastre copil.

pentru a face acest lucru, ne vom întoarce la componenta noastră părinte care ne redă numărul:

am făcut câteva adăugiri aici:

• schimbat initialCount la myCount, nu mai suntem setarea unui “initialCount”, prin urmare, starea count va fi gestionat în mamă odată ce componenta copil face o modificare a acestuia
• a creat un obicei change proprietate la <counter> șablon, folosind () sintaxa de legare eveniment, așa cum am învățat când am creat prima noastră componentă acest lucru semnifică un fel de click atunci când este utilizat pe un nod element nativ).
• a înregistrat proprietatea myCount în părintele
• a adăugat o metodă countChange() {} la clasă și a trecut-o în ascultătorul de evenimente (change)

🎉 Descarcă-l gratuit!

du-te dincolo de matrice ForEach. Obțineți încredere cu metode mai avansate, cum ar fi reducerea, găsirea, filtrarea, fiecare, unele și harta și înțelegeți pe deplin cum să gestionați structurile de date JavaScript.

• înțelegeți pe deplin cum să gestionați structurile de date JavaScript cu operații imuabile
• 31 pagini de sintaxă profundă, exemple din lumea reală, sfaturi și trucuri
• scrieți o logică de programare mai curată și mai bine structurată în 3 ore

✅ succes! Verificați-vă e-mailul, bucurați-vă.

ca un bonus suplimentar, vă vom trimite, de asemenea, câteva bunătăți suplimentare în câteva e-mailuri suplimentare.

aceasta stabilește fluxul nostru de date unidirecțional finalizat. Datele curg în jos din clasa AppComponent, în”, contorul poate schimba apoi valorile-și odată ce valoarea s-a schimbat, ne așteptăm ca countChange() să fie apelat. Acum trebuie să conectăm asta.

@decorator de ieșire

la fel ca folosind Input, putem importa Output și decora un nou change proprietate în interiorul nostru CounterComponent:

aceasta va configura metadatele necesare pentru a spune Angular că această proprietate trebuie tratată ca o legare de ieșire. Cu toate acestea, trebuie să stea alături de ceva numit EventEmitter.

EventEmitter

aceasta este partea interesantă. Pentru a putea folosi Output, trebuie să importăm și să legăm o nouă instanță a EventEmitter la ea:

folosind TypeScript la maxim, am face ceva de genul acesta pentru a semnifica tipul de valoare a evenimentului pe care îl emitem, iar ieșirea noastră changeeste de tip EventEmitter. În cazul nostru emitem un tip number:

invocând EventEmitter

deci, ce se întâmplă aici? Am creat o proprietate change și am legat o nouă instanță de EventEmitter – ce urmează?

putem apela pur și simplu metoda noastră this.change – totuși, deoarece face referire la o instanță de EventEmitter, trebuie să apelăm .emit() pentru a emite un eveniment părintelui:

aceasta va emite apoi o modificare a ascultătorului nostru (change) pe care îl configurăm în părinte, la care va fi invocat apelul nostru countChange($event), iar datele asociate evenimentului ne vor fi date prin intermediul proprietății $event.

Stateful callback assignment

Iată ce va trebui să facem, re-atribui this.myCount cu event care a trecut înapoi. Voi explica de ce mai jos:

acest lucru creează un flux de date unidirecțional pur. Datele provin de la AppComponent, se varsă în contorul nostru, contorul face o schimbare și emite acea schimbare înapoi la părintele de la comanda noastră – prin configurarea EventEmitter we. Odată ce avem aceste date înapoi, fuzionăm aceste modificări înapoi în componenta noastră părinte (stateful).

motivul pentru care facem acest lucru este să demonstrăm că Parent: {{ myCount }} actualizează în același timp Output informează părintele.

Bonus: nume de proprietăți personalizate

la fel cum am învățat cu @Input()și creând nume de proprietăți personalizate, putem face același lucru și cu @Output().

să presupunem că vom schimba (change) legarea la(update):

putem cârlig până numele nostru de proprietate personalizat, păstrând în același timp intern @Output numele de proprietate:

în esență, suntem doar spune Angular aici pentru căutare update ca proprietate să fie obligat să, și putem continua să utilizați this.change intern.

deci, nu-l ai, Ghidul pentru utilizarea ieșiri cu EventEmitter în componentele Angular lui. Acum înțelegeți modelul, codificarea fericită!

pentru a afla mai multe tehnici, cele mai bune practici și cunoștințe de experți din lumea reală, aș recomanda cu mare drag să verific cursurile mele Angular-acestea vă vor ghida în călătoria dvs. către stăpânirea Angular la maxim!