Komponenttitapahtumat EventEmitter ja @ Output in Angular

Angular components ovat arkkitehtuurin keskeisiä rakennuspalikoita. Kun olet ymmärtänyt komponenttiarkkitehtuurin, voit rakentaa mielessäsi kuvan siitä, miten koota käyttöliittymä perustuu tiedonsiirtoon.

tässä viestissä sukellamme Kulmakomponentteihin ja siihen, miten Tapahtumamitteria ja lähtöjä käytetään, jotta voimme siirtää tai ilmoittaa minkä tahansa vanhemman komponentin, että jokin on muuttunut, tai haluaisimme muuttaa sitä. Tämä tapahtuu tyypillisesti kautta “tapahtumat”, joten meidän” EventEmitter ” ja on suunniteltu noin yksisuuntainen tiedonkulkujärjestelmä, joka hyväksyy paljon järkevämpi lähestymistapa sovelluskehitykseen.

viimeistellään vanhemman ja lapsen välisen viestinnän perusteet esittelemällä EventEmitter ja @Output.

sarja

1. Bootstrapping your first Angular app
2. Creating your first Angular component
3. Passing data into Angular components with @Input
4. Component events with EventEmitter and @Output in Angular

Introduction

tämä opetusohjelma kattaa tilattomat osatapahtumat käyttämällä EventEmitter API: A ja @Output Decorator: ia. Näiden avulla voimme lähettää muutoksia tai mukautettuja tapahtumanimiä mukautetusta komponentista kulmikkaasti.

tämä postaus seuraa edellisestä artikkelista, joka käsitteli datan syöttämistä Kulmakomponenteissa @Inputilla, joten muista lukea se ensin!

Stateful (parent) component binding

paljolti kuten edellisessä tutoriaalissa, jossa asetamme @Input decorator hyväksymään syöttösidonnan, voimme tehdä saman ja kuunnella vanhemman, kun arvo muuttuu sisällä lapsi komponentti.

tämän tehdäksemme suuntaamme takaisin vanhempaan komponenttiimme, joka tekee laskumme:

olen tehnyt muutamia lisäyksiä täällä:

• muutettu initialCount myCount, emme enää aseta “alustavaa määrää”, joten laskutilaa hallitaan vanhemmassa, kun lapsikomponentti muuttaa sitä
• loi mukautetun change ominaisuuden <counter> malliin käyttäen () tapahtumaa sitovaa syntaksia, kuten opimme, kun loimme ensimmäisen komponenttimme, tämä merkitsee jonkinlaista tapahtumaa (kuten click käytettäessä alkuainesolmussa).
• kirjasi myCount ominaisuuden emoalueella
• lisäsi countChange() {} menetelmän luokkaan ja välitti sen (change) tapahtuman kuuntelijalle

🎉 lataa se ilmaiseksi!

ylittää Array Foreachin. Hanki luottavainen kehittyneempiä menetelmiä, kuten vähentää, löytää, suodattaa, jokainen, Jotkut ja kartta ja täysin ymmärtää, miten hallita JavaScript tietorakenteita.

• täysin ymmärtää, miten hallita JavaScript tietorakenteita muuttumattomilla operaatioilla
• 31 sivut deep-dive syntax, real-world examples, tips and tricks
• Write cleaner and better-structured programming logic in 3 hours

✅ onnistui! Tarkista sähköpostisi, nauti.

ylimääräisenä bonuksena, me myös lähettää sinulle joitakin ylimääräisiä herkkuja koko muutaman ylimääräisen sähköpostit.

tämä muodostaa viimeistellyn yksisuuntaisen dataflow ‘ n. Tieto virtaa AppComponent luokasta alaspäin”, laskuri voi sitten muuttaa arvoja-ja arvon muututtua odotamme countChange(): n kutsuvan. Meidän on nyt kytkettävä tämä.

@Output decorator

paljon kuin käyttämällä Input, voimme tuoda Output ja sisustaa uuden change kiinteistön sisällä CounterComponent:

tämä määrittää metatiedot, jotka tarvitaan kertomaan Kulmikas tämä ominaisuus on käsiteltävä lähtösidonta. Sen on kuitenkin istuttava jonkin EventEmitter – nimisen rinnalla.

Tapahtumatekijä

tämä on se mielenkiintoinen osuus. Voidaksemme käyttää Output: ää, meidän on tuotava ja sidottava siihen uusi esiintymä EventEmitter:

käyttäen konekirjoitusta täysillä, tekisimme jotain tällaista merkitäksemme sitä tapahtumatyyppiä, jota emittoimme, ja change ulostulomme on tyyppiä EventEmitter. Meidän tapauksessamme emittoidaan number tyyppiä:

vedotaan Tapahtumamittariin

joten mitä tässä tapahtuu? Olemme luoneet change ominaisuuden ja sitoneet siihen uuden instanssin EventEmitter – mitä seuraavaksi?

voimme yksinkertaisesti soittaa this.change – menetelmällemme-mutta koska se viittaa EventEmitter esiintymään, meidän on soitettava .emit() emittoidaksemme tapahtuman vanhemmalle:

tämä sitten emittoi muutoksen (change) kuuntelijallemme, jonka asetamme emorille, johon meidän countChange($event) takaisinsoittomme vedotaan, ja tapahtumaan liittyvät tiedot annetaan meille $event: n kautta omaisuus.

Stateful callback assignment

Here ‘s what we’ ll need to do, re-assignment this.myCount with event that ‘ s passed back. Selitän miksi alla:

tämä luo puhtaan yksisuuntaisen dataflow ‘ n. Tieto tulee AppComponent: stä, virtaa laskuriimme, laskuri tekee muutoksen ja lähettää tuon muutoksen takaisin vanhemmalle käskystämme – EventEmitter me asetamme. Kun olemme saaneet nämä tiedot takaisin ylös, yhdistämme nämä muutokset takaisin meidän vanhempi (stateful) komponentti.

syy tähän on osoittaa, että Parent: {{ myCount }} päivittää samalla meidän Output ilmoittaa asiasta vanhemmalle.

Bonus: custom property names

paljolti kuten opimme @Input(): n kanssa ja luomme mukautettuja kiinteistönimiä, voimme tehdä saman myös @Output(): n kanssa.

oletetaan, että muutetaan (change) sitova (update):

voimme kytkeä mukautetun ominaisuuden nimen, säilyttäen sisäisen @Output ominaisuuden nimen:

pohjimmiltaan, kerromme vain Angular tässä etsiä update sitovaksi omaisuudeksi, ja voimme jatkaa this.change: n käyttöä sisäisesti.

joten siinä on se, opas Lähtöjen käyttöön Eventemitterillä Angularyn komponenteissa. Nyt ymmärrät mallia, hyvää koodausta!

oppiaksesi lisää tekniikoita, parhaita käytäntöjä ja tosielämän asiantuntijatietoa suosittelen lämpimästi tutustumaan kulmikkaisiin kursseihini-ne opastavat sinut läpi matkasi kulmikkuuden hallitsemiseen täysillä!