Komponenthændelser med EventEmitter og @Output i Angular

Vinkelkomponenter er de grundlæggende byggesten i arkitekturen. Når du har forstået komponentarkitektur, kan du opbygge et billede i dit hoved om, hvordan du samler din grænseflade baseret på datakommunikation.

i dette indlæg skal vi dykke ned i Vinkelkomponenter og hvordan man bruger EventEmitter og output, så vi kan overføre eller underrette enhver overordnet komponent om, at noget er ændret, eller vi vil gerne ændre det. Dette gøres typisk via “begivenheder”, deraf vores” EventEmitter ” og er designet omkring et ensartet datastrømssystem, der vedtager en meget mere rimelig tilgang til applikationsudvikling.

lad os færdiggøre det grundlæggende i forældre-barn og barn-forældre kommunikation ved at introducere EventEmitter og @Output.

serie

1. Bootstrapping din første Vinkelapp
2. oprettelse af din første Vinkelkomponent
3. overførsel af data til Vinkelkomponenter med @Input
4. Komponenthændelser med EventEmitter og @Output i vinkel

introduktion

denne tutorial vil dække statsløse komponent begivenheder ved hjælp af EventEmitter API og @Output Decorator. Disse giver os mulighed for at udsende ændringer eller brugerdefinerede begivenhedsnavne fra en brugerdefineret komponent i Angular.

dette indlæg følger af den forrige artikel om overførsel af data i Vinkelkomponenter med @Input, så sørg for at læse det først!

stateful (forælder) komponentbinding

ligesom i den forrige tutorial, hvor vi opsætter en @Input dekoratør til at acceptere en inputbinding, kan vi gøre det samme og lytte i forælderen, når en værdi ændres inde i vores underordnede komponent.

for at gøre dette går vi tilbage til vores overordnede komponent, der gør vores tæller:

jeg har lavet et par tilføjelser her:

• ændret initialCount til myCount, vi indstiller ikke længere en “initialCount”, derfor styres tælletilstanden i forælderen, når barnekomponenten foretager en ændring af den
• oprettet en brugerdefineret change egenskab til <counter> skabelon ved hjælp af () hændelsesbindingssyntaks, som vi lærte, da vi oprettede vores første komponent, betyder dette en slags begivenhed (f.eks. en click når det bruges på en native element node).
• loggede myCount egenskaben i forælderen
• tilføjede en countChange() {} metode til klassen og overførte den til (change) begivenhedslytteren

🎉 Hent det gratis!

gå ud over Array ForEach. Bliv fortrolig med mere avancerede metoder som reducer, Find, Filtrer, hver, Nogle og kort og forstå fuldt ud, hvordan du administrerer JavaScript-datastrukturer.

• forstå fuldt ud, hvordan man administrerer JavaScript-datastrukturer med uforanderlige operationer
• 31 sider med dybdyksyntaks, eksempler fra den virkelige verden, tip og tricks
• skriv renere og bedre struktureret programmeringslogik inden for 3 timer

✅ succes! Tjek din e-mail, god fornøjelse.

som en ekstra bonus sender vi dig også nogle ekstra godbidder på tværs af et par ekstra e-mails.

dette opstiller vores endelige uni-directional dataforløb. Dataene strømmer ned fra AppComponent – klassen, ind i`, tælleren kan derefter ændre værdierne-og når værdien er ændret, forventer vi, at countChange() kaldes. Vi er nu nødt til at forbinde dette.

@Output decorator

meget gerne bruge Input, kan vi importere Output og dekorere en ny change ejendom inde i vores CounterComponent:

dette konfigurerer de metadata, der er nødvendige for at fortælle Angular, at denne egenskab skal behandles som en outputbinding. Det skal dog sidde ved siden af noget, der hedder EventEmitter.

EventEmitter

dette er den interessante del. For at kunne bruge vores Output skal vi importere og binde en ny forekomst af EventEmitter til den:

ved hjælp af TypeScript til fulde ville vi gøre noget som dette for at betegne den type hændelsesværdi, vi udsender, og vores change output er af typen EventEmitter. I vores tilfælde udsender vi en number type:

påberåber Eventemitteren

så hvad sker der her? Vi har oprettet en change ejendom og bundet en ny forekomst af EventEmitter til den – hvad næste?

vi kan simpelthen ringe til vores this.change metode – men fordi den refererer til en forekomst af EventEmitter, skal vi ringe .emit() for at udsende en begivenhed til forælderen:

dette udsender derefter en ændring til vores (change) lytter, vi opsætter i forælderen, som vores countChange($event) tilbagekald vil blive påberåbt, og de data, der er knyttet til begivenheden, vil blive givet til os via $event ejendom.

Stateful callback assignment

her er hvad vi skal gøre, gentildel this.myCount med event det er gået tilbage. Jeg vil forklare hvorfor nedenfor:

dette skaber en ren Uni-directional dataforløb. Dataene kommer fra AppComponent, strømmer ind i vores tæller, tælleren foretager en ændring og udsender denne ændring tilbage til forælderen på vores kommando – via EventEmitter vi opsætter. Når vi har fået disse data op igen, fusionerer vi disse ændringer tilbage i vores overordnede (stateful) komponent.

grunden til, at vi gør dette, er at demonstrere, at Parent: {{ myCount }} opdaterer samtidig vores Output informerer forældrene.

Bonus: brugerdefinerede ejendomsnavne

ligesom vi lærte med @Input()og oprettelse af brugerdefinerede ejendomsnavne, kan vi også gøre det samme med @Output().

lad os antage, at vi ændrer (change) binding til (update):

vi kan tilslutte vores brugerdefinerede ejendomsnavn, samtidig med at vi bevarer det interne@Output ejendomsnavn:

i det væsentlige fortæller vi bare Angular her at slå op update som den ejendom, der skal bindes til, og vi kan fortsætte med at bruge this.change internt.

så der har du det, vejledningen til at bruge output med EventEmitter i Angular ‘ S komponenter. Nu forstår du modellen, glad kodning!

for at lære flere teknikker, bedste praksis og ekspertviden i den virkelige verden vil jeg meget anbefale at tjekke mine Vinkelkurser-de vil guide dig gennem din rejse til at mestre vinkel fuldt ud!