Component events met EventEmitter en @Output in Angular

Hoekcomponenten zijn de fundamentele bouwstenen van de architectuur. Zodra u de componentarchitectuur hebt begrepen, kunt u een beeld in uw hoofd bouwen over hoe u uw interface op basis van Datacommunicatie kunt samenstellen.

in dit bericht gaan we dieper ingaan op Hoekcomponenten en hoe we de EventEmitter en Outputs kunnen gebruiken, zodat we een oudercomponent kunnen overdragen of waarschuwen dat er iets is veranderd, of we willen het graag veranderen. Dit wordt meestal gedaan via “events”, vandaar onze” EventEmitter ” en is ontworpen rond een uni-directionele data flow systeem dat een veel meer redelijke benadering van applicatie ontwikkeling.

laten we de basisprincipes van ouder-kind en kind-oudercommunicatie afronden door EventEmitter en @Outputin te voeren.

serie

1. Bootstrapping uw eerste Hoekapplicatie
2. uw eerste Hoekcomponent
3. gegevens doorgeven naar Hoekcomponenten met @Input
4. Component-gebeurtenissen met EventEmitter en @Output in Hoek

Inleiding

deze tutorial zal stateless component-gebeurtenissen behandelen met behulp van de EventEmitter API en EventEmitter@Output binnenhuisarchitect. Hiermee kunnen we verandering of een aangepaste gebeurtenis namen uit te zenden van een aangepaste component in Hoekige.

dit bericht volgt uit het vorige artikel over het doorgeven van gegevens in Hoekige componenten met @Input, dus lees dat eerst!

Stateful (parent) componentbinding

net als in de vorige tutorial, waar we een @Input decorator Instellen om een invoerbinding te accepteren, kunnen we hetzelfde doen en in de parent luisteren voor wanneer een waarde verandert binnen ons dochtercomponent.

om dit te doen, gaan we terug naar onze bovenliggende component die onze telling weergeeft:

ik heb hier een paar toevoegingen gemaakt:

• Changed initialCount to myCount, we zijn niet langer het instellen van een “initialCount”, daarom zal de count status worden beheerd in de ouder zodra de dochter component maakt een wijziging in het
• een aangepaste change eigenschap gemaakt naar de <counter> sjabloon, met behulp van () event binding syntaxis, zoals we geleerd toen we onze eerste component dit betekent een soort gebeurtenis (zoals een click wanneer gebruikt op een native element Node).
• registreerde de myCount eigenschap in de ouder
• voegde een countChange() {} methode toe aan de klasse, en gaf het door aan de (change) gebeurtenisluisteraar

🎉 Download het gratis!

ga verder dan Array ForEach. Krijg vertrouwen met meer geavanceerde methoden zoals verminderen, zoeken, filteren, elke, Sommige en kaart en volledig begrijpen hoe JavaScript-datastructuren te beheren.

• volledig begrijpen hoe JavaScript datastructuren te beheren met onveranderlijke operaties
• 31 pagina ‘ s met deep-dive syntaxis, voorbeelden uit de echte wereld, tips en trucs
• Schrijf een schonere en beter gestructureerde programmeerlogica binnen 3 uur

✅ succes! Controleer uw e-mail, geniet.

als extra bonus sturen we je ook wat extra goodies over een paar extra e-mails.

dit stelt onze afgeronde Uni-directionele dataflow op. De gegevens stromen naar beneden van de AppComponent klasse, naar de”, de teller kan dan de waarden veranderen-en zodra de waarde is veranderd verwachten we dat countChange() wordt aangeroepen. We moeten dit nu afsluiten.

@output decorator

net als bij gebruik van Input, kunnen we Output importeren en een nieuwe change – eigenschap in onze CounterComponent:

dit configureert de metadata die nodig zijn om Angular te vertellen dat deze eigenschap behandeld moet worden als een uitvoerbinding. Het moet echter naast iets zitten dat de EventEmitterwordt genoemd.

EventEmitter

dit is het interessante deel. Om onze Output te kunnen gebruiken, moeten we een nieuwe instantie van de EventEmitter importeren en eraan binden:

met maximaal TypeScript zouden we iets als dit doen om het type gebeurtenis waarde aan te geven dat we uitzenden, en onze change uitvoer is van het type EventEmitter. In ons geval zenden we een number type uit:

waarbij we de EventEmitter

aanroepen. We hebben een eigenschap change aangemaakt en er een nieuwe instantie van EventEmitter aan gekoppeld-wat nu?

we kunnen gewoon onze this.change methode aanroepen-omdat het echter verwijst naar een instantie van EventEmitter, moeten we .emit() aanroepen om een gebeurtenis naar de ouder uit te zenden:

dit zal dan een wijziging uitzenden naar onze (change) luisteraar die we in de ouder hebben ingesteld, waarnaar onze countChange($event) callback zal worden aangeroepen, en de gegevens die aan de gebeurtenis zijn gekoppeld zullen aan ons worden gegeven via de eigenschap $event.

Stateful callback toewijzing

Dit is wat we moeten doen, opnieuw toewijzen this.myCount met de event die is doorgegeven. Ik zal hieronder uitleggen waarom:

dit creëert een zuivere Uni-directionele dataflow. De gegevens komen van AppComponent, stromen in onze teller, de teller maakt een verandering, en zendt die verandering terug naar de ouder op ons commando – via de EventEmitter die we instellen. Zodra we die data back-up, we mergen die wijzigingen terug in onze ouder (stateful) component.

de reden dat we dit doen is om aan te tonen dat Parent: {{ myCount }} updates tegelijkertijd onze Output de ouder informeert.

Bonus: aangepaste eigenschapsnamen

net zoals we geleerd hebben met @Input() en aangepaste eigenschapsnamen maken, kunnen we hetzelfde doen met @Output().

laten we aannemen dat we de (change) binding wijzigen naar (update):

we kunnen onze eigen eigenschapsnaam koppelen, met behoud van de interne @Output eigenschapsnaam:

in wezen vertellen we hier Angular om update op te zoeken als de eigenschap waaraan gebonden moet worden, en we kunnen this.change intern blijven gebruiken.

dus daar heb je het, De Gids Voor het gebruik van Outputs met EventEmitter in Angular ‘ s Componenten. Nu begrijp je het model, gelukkig coderen!

om meer technieken, best practices en expertkennis uit de echte wereld te leren, raad ik u ten zeerste aan om mijn Hoekcursussen te bekijken-zij zullen u begeleiden tijdens uw reis naar het optimaal beheersen van de hoek!