Komponenthendelser Med EventEmitter Og @Output I Angular

Vinkelkomponenter er de grunnleggende byggesteinene i arkitekturen. Når du har forstått komponentarkitektur, kan du bygge et bilde i hodet ditt om hvordan du monterer grensesnittet ditt basert på datakommunikasjon.

I dette innlegget skal vi dykke inn Angular komponenter og hvordan Du bruker EventEmitter og Utganger, slik at vi kan overføre eller varsle noen foreldre komponent som noe har endret seg, eller vi ønsker å endre det. Dette gjøres vanligvis via “hendelser”, derav Vår” EventEmitter ” og er designet rundt et uni-directional data flow system som vedtar en mye mer fornuftig tilnærming til applikasjonsutvikling.

la oss fullføre grunnleggende kommunikasjon mellom foreldre og barn og foreldre ved å introdusere EventEmitter og @Output.

Serie

1. Bootstrapping din første Vinkelapp
2. Opprette din første Vinkelkomponent
3. Overføre data til Vinkelkomponenter med @Input
4. Komponenthendelser Med EventEmitter og @Output I Angular

Introduksjon

denne opplæringen vil dekke statsløse komponenthendelser ved Hjelp Av Api-En EventEmitter Og Dekoratøren @Output. Disse tillater oss å sende endring eller eventuelle egendefinerte hendelsesnavn fra en egendefinert komponent I Angular.

dette innlegget følger fra forrige artikkel om å sende data i Vinkelkomponenter med @ Input, så vær sikker på å lese det først!

Stateful (parent) component binding

Mye som i forrige tutorial, der vi sette opp en @Input dekoratør å godta en inngang binding, kan vi gjøre det samme og lytte i den overordnede for når en verdi endres inne i våre barn komponent.

for å gjøre dette, går vi tilbake til vår overordnede komponent som gjengir vår telling:

jeg har gjort noen tillegg her:

• Endret initialCount til myCount, setter vi ikke lenger en “initialCount”, derfor vil tellestaten bli administrert i foreldrene når barnekomponenten gjør en endring i den
• Opprettet en egendefinert change egenskap til <counter> – malen, ved hjelp av () hendelsesbindingssyntaks, som vi lærte da vi opprettet vår første komponent, betyr dette en slags hendelse (for eksempel en click når den brukes på en native element node).
• Logget egenskapen myCount i overordnet
• La til en countChange() {} – metode i klassen, og sendte den inn i hendelseslytteren (change)

🎉 Last den ned gratis!

Gå utover Array ForEach. Bli trygg med mer avanserte metoder som Reduser, Finn, Filtrer, Hver, Noen og Kart og forstå fullt ut hvordan du administrerer JavaScript-Datastrukturer.

• fullt ut forstå Hvordan du administrerer JavaScript Datastrukturer med uforanderlige operasjoner
• 31 sider av deep-dive syntaks, reelle eksempler, tips og triks
• Skriv renere og bedre strukturert programmering logikk innen 3 timer

✅ Suksess! Sjekk e-posten din, nyt.

Som en ekstra bonus, vil vi også sende deg noen ekstra godbiter over noen ekstra e-poster.

Dette setter opp vår endelige uni-directional dataflow. Dataene strømmer ned fra klassen AppComponent, inn i”, telleren kan da endre verdiene – og når verdien er endret, forventer vi countChange() å bli kalt. Vi må koble dette opp.

@Output decorator

Mye som å bruke Input, kan vi importere Output og dekorere en ny change eiendom inne i vår CounterComponent:

dette vil konfigurere metadataene som er nødvendige for Å fortelle Angular at denne egenskapen skal behandles som en utgangsbinding. Det må imidlertid sitte ved siden av noe som kalles EventEmitter.

EventEmitter

dette er den interessante delen. For å kunne bruke vår Output, må vi importere og binde en ny forekomst av EventEmitter til den:

Ved å bruke TypeScript til det fulle, vil vi gjøre noe slikt for å betegne typen hendelsesverdi vi sender ut, og vår change utgang er av typen EventEmitter. I vårt tilfelle sender vi ut en number type:

Påberope EventEmitter

så hva skjer her? Vi har opprettet en change eiendom, og bundet en ny forekomst av EventEmitter til den – hva neste?

vi kan bare ringe vår this.change metode – men fordi den refererer til en forekomst av EventEmitter, må vi ringe .emit() for å sende ut en hendelse til foreldrene:

Dette vil da sende ut en endring til vår (change) lytteren vi setter opp i foreldrene, som vår countChange($event) tilbakeringing vil bli påkalt, og dataene knyttet til hendelsen vil bli gitt til oss via $event eiendom.

Stateful tilbakeringingsoppgave

Her er hva vi må gjøre, tilordne this.myCount med event som er sendt tilbake. Jeg forklarer hvorfor nedenfor:

dette skaper en ren uni-directional dataflow. Dataene kommer fra AppComponent, strømmer inn i disken vår, telleren gjør en endring, og avgir den endringen tilbake til foreldrene på vår kommando – via EventEmitter vi setter opp. Når vi har fått dataene tilbake, fusjonerer vi disse endringene tilbake til vår overordnede (stateful) komponent.

grunnen til at vi gjør dette er å demonstrere at Parent: {{ myCount }} oppdaterer samtidig vår Output informerer foreldrene.

Bonus: tilpassede eiendomsnavn

Mye som vi lærte med @Input() og opprette egendefinerte eiendomsnavn, kan vi også gjøre det samme med @Output().

la oss anta at vi endrer (change) bindingen til (update):

Vi kan koble til vårt tilpassede eiendomsnavn, samtidig som vi beholder det interne @Output eiendomsnavn:

I Hovedsak forteller Vi Bare Angular her for å slå opp update som egenskapen å være bundet til, og vi kan fortsette å bruke this.change internt.

så der har du det, guiden til å bruke Utganger Med EventEmitter i Angular ‘ s komponenter. Nå forstår du modellen, glad koding!

for å lære mer teknikker, beste praksis og real-world ekspertkunnskap, vil jeg anbefale å sjekke Ut Mine Angular kurs – de vil veilede deg gjennom reisen din til å mestre Angular til det fulle!