komponenses események Eventemitterrel és @ Output Angular

az Angular components az építészet alapvető építőelemei. Miután megértette az alkatrész-architektúrát, képet készíthet a fejében arról, hogyan állíthatja össze az interfészt az adatkommunikáció alapján.

ebben a bejegyzésben fogunk belevetik magukat Angular components és hogyan kell használni a EventEmitter és kimenetek, így tudjuk továbbítani, vagy értesíti bármely szülő komponens, hogy valami megváltozott, vagy szeretnénk változtatni. Ez tipikusan “események”, így az “EventEmitter” révén történik, és egy egyirányú adatáramlási rendszer köré épül, amely sokkal ésszerűbb megközelítést alkalmaz az alkalmazásfejlesztéshez.

zárjuk le a szülő-gyermek és gyermek-szülő kommunikáció alapjait a EventEmitterés @Output bemutatásával.

sorozat

1. az első Angular alkalmazás Bootstrappolása
2. az első Angular komponens létrehozása
3. adatok továbbítása Angular komponensekbe @Input
4. komponens események Eventemitterrel és @Output Angular

Bevezetés

ez az oktatóanyag a EventEmitter API és a @Output Decorator használatával foglalkozik az állapot nélküli komponens eseményekkel. Ezek lehetővé teszik számunkra, hogy változást vagy bármilyen egyedi eseménynevet bocsássunk ki az Angular egyéni összetevőjéből.

ez a bejegyzés az előző cikkből következik, amely az adatok szögletes komponensekben történő továbbításáról szól @bemenettel, ezért feltétlenül olvassa el ezt először!

Stateful (parent) component binding

hasonlóan az előző oktatóanyaghoz, ahol egy @Input decorator-t állítunk be egy bemeneti kötés elfogadására, ugyanezt megtehetjük, és meghallgathatjuk a szülőben, amikor egy érték megváltozik a gyermekkomponensünkön belül.

ehhez visszatérünk a szülő komponensünkhöz, amely rendereli a számlálásunkat:

néhány kiegészítést tettem itt:

• megváltozott initialCount hogy myCount, már nem állítunk be “initialCount”, ezért a számlálási állapot a szülőben lesz kezelve, ha a gyermek összetevő módosítja azt
• létrehozott egy egyéni change tulajdonságot a <counter> sablonhoz, a () eseménykötési szintaxist használva, ahogy azt az első komponensünk létrehozásakor megtanultuk, ez valamilyen eseményt jelent (például egy click ha natív elemcsomóponton használják).
• naplózta a myCount tulajdonságot a szülőben
• Hozzáadott egy countChange() {} metódust az osztályhoz, majd átadta a (change) eseményfigyelőnek

🎉 töltse le ingyen!

Lépj túl tömb ForEach. Legyen magabiztos a fejlettebb módszerekkel, mint a Reduce, Find, Filter, Every, Some és Map, és teljes mértékben megértsék, hogyan kell kezelni a JavaScript adatstruktúrákat.

• teljesen megérteni, hogyan kell kezelni a JavaScript adatstruktúrákat változatlan műveletekkel
• 31 mély merülési szintaxis oldalai, valós példák, tippek és trükkök
• írjon tisztább és jobban strukturált programozási logikát 3 órán belül

✅ siker! Ellenőrizze az e-mailjét, élvezd.

mint egy extra bónusz, mi is küldünk néhány extra finomságok szerte néhány extra e-maileket.

ez beállítja a véglegesített egyirányú adatfolyamot. Az adatok a AppComponent osztályból a”, A számláló ezután megváltoztathatja az értékeket – és ha az érték megváltozott, arra számítunk, hogy countChange() meghívásra kerül. Ezt be kell drótoznunk.

@Output decorator

hasonlóan a Input használatához, importálhatunk Output – et és díszíthetünk egy új change tulajdonságot a CounterComponent:

ez konfigurálja azokat a metaadatokat, amelyek szükségesek ahhoz, hogy az Angular ezt a tulajdonságot kimeneti kötésként kezelje. Azonban a EventEmitternevű valami mellett kell ülnie.

EventEmitter

ez az érdekes rész. Ahhoz, hogy használni tudjuk a Output – et, importálnunk kell és hozzá kell kötnünk a EventEmitter új példányát:

a TypeScript használatával a legteljesebb mértékben valami ilyesmit tennénk, hogy jelezzük az általunk kibocsátott eseményérték típusát, és a change kimenetünk EventEmittertípusú. Esetünkben egy number típust bocsátunk ki:

az EventEmitter meghívása

Tehát mi történik itt? Létrehoztunk egy change tulajdonságot, és a EventEmitter új példányát kötöttük hozzá – mi a következő lépés?

egyszerűen hívhatjuk a this.change metódust – azonban mivel a EventEmitter egy példányára hivatkozik, a .emit() – et kell hívnunk, hogy eseményt bocsássunk ki a szülőnek:

ez aztán változást bocsát ki a szülőben beállított (change) hallgatónkra, amelyre a countChange($event) visszahívás hivatkozni fog, és az eseményhez kapcsolódó adatokat a $event tulajdon.

Stateful visszahívási hozzárendelés

itt van, mit kell tennünk, újra hozzárendelni this.myCount a event, hogy telt vissza. Az alábbiakban elmagyarázom, miért:

ez tiszta egyirányú adatfolyamot hoz létre. Az adatok AppComponent – ből származnak, beáramlanak a számlálónkba, a számláló változtatást hajt végre, és ezt a változást visszaadja a parancsunk szerinti szülőnek – az általunk beállított EventEmitter – on keresztül. Miután megkaptuk ezeket az adatokat, egyesítjük ezeket a változásokat a szülő (állapotos) összetevőnkbe.

ennek az az oka, hogy bemutatjuk, hogy a Parent: {{ myCount }} egyszerre frissíti a Output a szülőt.

bónusz: egyéni tulajdonságnevek

ugyanúgy, mint a @Input() – nél és az egyéni tulajdonságnevek létrehozásakor, ugyanezt tehetjük a @Output() – nél is.

tegyük fel, hogy megváltoztatjuk a (change) kötést (update):

összekapcsolhatjuk az egyéni tulajdonságnevünket, miközben megőrizzük a belső @Output tulajdonságnevet:

lényegében csak azt mondjuk az Angularnak, hogy keresse meg az update tulajdonságot, amelyhez kötni kell, és továbbra is használhatjuk a this.change belső használatát.

tehát itt van az útmutató az EventEmitter kimenetek használatához az Angular komponenseiben. Most már érted a modellt, boldog kódolást!

további technikák, bevált gyakorlatok és valós szakértői ismeretek megismeréséhez nagyon ajánlom, hogy nézze meg az Angular tanfolyamaimat – ezek végigvezetik Önt az Angular teljes elsajátításához vezető úton!