Komponenthändelser med EventEmitter och @Output i Angular

Angular components är de grundläggande byggstenarna i arkitekturen. När du har förstått komponentarkitektur kan du bygga en bild i ditt huvud om hur du monterar ditt gränssnitt baserat på datakommunikation.

i det här inlägget kommer vi att dyka in i Vinkelkomponenter och hur man använder EventEmitter och utgångar, så att vi kan överföra eller meddela någon överordnad komponent att något har förändrats, eller vi skulle vilja ändra det. Detta görs vanligtvis via “händelser”, därav vår” EventEmitter ” och är utformad kring ett enkelriktat dataflödessystem som antar ett mycket mer rimligt tillvägagångssätt för applikationsutveckling.

Låt oss slutföra grunderna för förälder-barn och barn-förälder kommunikation genom att införa EventEmitter och @Output.

Series

1. Bootstrapping din första vinkel app
2. skapa din första vinkel komponent
3. passerar data till vinkel komponenter med @Input
4. Komponenthändelser med EventEmitter och @Output i vinkel

Inledning

denna handledning kommer att täcka statslösa komponenthändelser med hjälp av EventEmitter API och @Output decorator. Dessa tillåter oss att avge förändring eller några anpassade händelsenamn från en anpassad komponent i Angular.

det här inlägget följer från föregående artikel om överföring av data i Vinkelkomponenter med @Input, så var noga med att läsa det först!

Stateful (förälder) komponentbindning

ungefär som i föregående handledning, där vi ställer in en @Input dekoratör för att acceptera en inmatningsbindning, kan vi göra detsamma och lyssna i föräldern för när ett värde ändras i vår barnkomponent.

för att göra detta går vi tillbaka till vår moderkomponent som gör vårt antal:

jag har gjort några tillägg här:

• ändrad initialCount till myCount, vi ställer inte längre in en “initialCount”, därför kommer räknetillståndet att hanteras i föräldern när barnkomponenten gör en ändring av den
• skapade en anpassad change egenskap till <counter> mallen, med () händelsebindningssyntax, som vi lärde oss när vi skapade vår första komponent betyder det någon form av händelse (till exempel en click när den används på en inbyggd elementnod).
• loggade egenskapen myCount i föräldern
• lade till en countChange() {} – metod i klassen och skickade den till (change) händelselyssnaren

🎉 ladda ner det gratis!

gå bortom Array ForEach. Bli säker med mer avancerade metoder som Minska, hitta, filtrera, varje, vissa och kartlägga och förstå hur man hanterar JavaScript-datastrukturer.

• förstå hur du hanterar JavaScript-datastrukturer med oföränderliga operationer
• 31 sidor med djupdyksyntax, verkliga exempel, tips och tricks
• skriv renare och bättre strukturerad programmeringslogik inom 3 timmar

✅ framgång! Kolla din e-post, njut av.

som en extra bonus skickar vi också några extra godsaker över några extra e-postmeddelanden.

detta skapar vårt slutförda enkelriktade dataflöde. Data flyter ner från klassen AppComponent, till `, räknaren kan sedan ändra värdena – och när värdet har ändrats förväntar vi oss att countChange() ska ringas. Vi måste nu koppla upp det här.

@Output decorator

ungefär som att använda Input, kan vi importera Output och dekorera en ny change egendom inuti vår CounterComponent:

detta kommer att konfigurera metadata som krävs för att berätta Angular den här egenskapen ska behandlas som en utdatabindning. Det måste dock sitta bredvid något som kallas EventEmitter.

EventEmitter

detta är den intressanta delen. För att kunna använda vår Output måste vi importera och binda en ny instans av EventEmitter till den:

med TypeScript till fullo skulle vi göra något så här för att beteckna typen av händelsevärde vi avger, och vår change – utgång är av typen EventEmitter. I vårt fall avger vi en number typ:

åberopar EventEmitter

så vad händer här? Vi har skapat en change egenskap och bundet en ny instans av EventEmitter till den-vad nästa?

vi kan helt enkelt ringa vår this.change – metod-men eftersom den refererar till en instans av EventEmitter måste vi ringa .emit() för att avge en händelse till föräldern:

detta kommer då att avge en ändring till vår (change) lyssnare vi ställer in i föräldern, till vilken vår countChange($event) återuppringning kommer att åberopas, och de data som är associerade med händelsen kommer att ges till oss via $event egendom.

Stateful callback-uppdrag

här är vad vi behöver göra, tilldela this.myCount med event som har gått tillbaka. Jag förklarar varför nedan:

detta skapar en ren enkelriktad dataflöde. Uppgifterna kommer från AppComponent, strömmar in i vår räknare, räknaren gör en förändring och avger den ändringen tillbaka till föräldern på vårt kommando – via EventEmitter vi ställer in. När vi har fått den informationen tillbaka, sammanfogar vi dessa ändringar tillbaka till vår förälder (stateful) komponent.

anledningen till att vi gör detta är att visa att Parent: {{ myCount }} uppdaterar samtidigt vår Output informerar föräldern.

Bonus: anpassade fastighetsnamn

precis som vi lärde oss med @Input() och skapade anpassade fastighetsnamn kan vi också göra detsamma med @Output().

låt oss anta att vi ändrar (change) – bindningen till (update):

vi kan ansluta vårt anpassade fastighetsnamn, samtidigt som vi bevarar det interna@Output fastighetsnamnet:

i huvudsak berättar vi bara Angular här för att leta upp update som egenskapen att vara bunden till, och vi kan fortsätta använda this.change internt.

så där har du det, guiden för att använda utgångar med EventEmitter i Angular ‘ s components. Nu förstår du modellen, glad kodning!

för att lära dig mer tekniker, bästa praxis och verklig expertkunskap rekommenderar jag starkt att kolla in mina Angular-kurser – de kommer att vägleda dig genom din resa till mastering Angular till fullo!