Součást akce s EventEmitter a @Výstupní Úhlové

Úhlové komponenty jsou základní stavební bloky architektury. Jakmile pochopíte architekturu komponent, můžete si v hlavě vytvořit obrázek o tom, jak sestavit rozhraní na základě datové komunikace. V tomto příspěvku se budeme ponořit se do Úhlové komponenty a jak používat EventEmitter a Výstupy, takže můžeme přenášet nebo oznámit jakékoli nadřazené součásti, že se něco změnilo, nebo bychom chtěli změnit. To se obvykle provádí pomocí “události”, tedy náš “EventEmitter” a je navržen kolem jednosměrného systému toku dat, který přijímá mnohem rozumnější přístup k vývoji aplikací.

pojďme dokončit základy komunikace rodič-dítě a dítě-rodič zavedením EventEmitter a @Output.

Řada

1. Bootstrapping své první Hranaté aplikace
2. Vytvoření vaší první Úhlová složka
3. Předávání dat do Úhlové komponenty s @Vstup
4. Součást akce s EventEmitter a @Výstupní Úhlové

Úvod

Tento výukový program se bude týkat nestavové součásti události pomocí EventEmitter API @Output dekoratér. Ty nám umožňují vydávat změny nebo jakékoli vlastní názvy událostí z vlastní komponenty v Angular.

tento příspěvek vyplývá z předchozího článku o předávání dat v úhlových komponentách s @Input,takže si to nejprve přečtěte!

Stateful (rodič) součástí závazné

podobně jako v předchozím tutoriálu, kde jsme nastavit @Input dekoratér přijmout vstupní závazné, můžeme udělat to samé a poslouchat rodiče, když se změní hodnota uvnitř naše dítě součástí.

Chcete-li to provést, vrátíme se k naší mateřské komponentě, která vykresluje náš počet:

zde jsem provedl několik dodatků:

• Změnil initialCount myCount, jsme již nastavení “initialCount”, proto hrabě stát bude řízen v mateřské jakmile dítě komponenta umožňuje změnu
• vytvořit vlastní change vlastnost <counter> šablony, pomocí () událost závazné syntaxe, jako jsme se naučili, když jsme vytvořili náš první složka znamená nějakou událost (například click při použití na nativní prvkem Uzel).
• Přihlášen myCount nemovitosti v mateřské
• Přidáno countChange() {} metodu třídy, a předal ji do (change) posluchač události

🎉 Stáhněte si ji zdarma!

přesahují pole ForEach. Získejte jistotu s pokročilejšími metodami, jako je snížit, najít, filtrovat, každý, některé a mapovat a plně pochopit, jak spravovat datové struktury JavaScriptu.

• Plně pochopit, jak spravovat JavaScript Datové Struktury s operací neměnný
• 31 stránky deep-dive syntaxe, real-svět příklady, tipy a triky
• Psát čistší a lépe strukturované programování logiky do 3 hodin

✅ Úspěch! Zkontrolujte svůj e-mail, užívat si.

jako bonus navíc Vám také pošleme několik dalších dobrot v několika e-mailech navíc.

tím se nastaví náš konečný jednosměrný datový tok. Data proudí dolů ze třídy AppComponent do”, čítač pak může změnit hodnoty – a jakmile se hodnota změní, očekáváme volání countChange(). Teď to musíme odposlechnout.

@Výstup dekoratér

stejně jako použití Input, můžeme importovat Output a zdobí nový change majetek v našem CounterComponent:

To bude konfigurovat metadata nutné říct Úhlové tato vlastnost je být zacházeno jako výstupní vazba. Musí však sedět vedle něčeho, co se nazývá EventEmitter.

EventEmitter

to je zajímavá část. Aby bylo možné používat naše Output, musíme importovat a svázat nové instance EventEmitter to:

Pomocí Strojopis naplno bychom udělat něco jako tohle znamenat, typ události, hodnotu, kterou vyzařují, a naše change výstup je typu EventEmitter. V našem případě vydáváme number Typ:

vyvolání Eventemitteru

takže co se tady děje? Vytvořili jsme vlastnost change a svázali jsme k ní novou instanci EventEmitter – co dál?

můžeme jednoduše zavolat na naši this.change metoda – nicméně, protože to odkazuje instance EventEmitter, musíme zavolat .emit() emitovat události na mateřské: To se pak vydávají změnit, aby naše (change) posluchač nastavení jsme v mateřské, na které naše countChange($event) zpětné volání bude použit, a údaje související s událostí, bude nám dána prostřednictvím $event majetku.

stavové přiřazení zpětného volání

zde je to, co musíme udělat, znovu přiřadit this.myCount s event, který je předán zpět. Vysvětlím, proč níže:

to vytváří čistý jednosměrný datový tok. Data pocházejí z AppComponent, proudí do našeho čítače, čítač provede změnu a vydá tuto změnu zpět na nadřazený příkaz-prostřednictvím nastavení EventEmitter. Jakmile máme tato data zálohována, sloučíme tyto změny zpět do naší nadřazené (stavové) komponenty.

důvodem, proč to děláme, je prokázat, že Parent: {{ myCount }} aktualizuje současně naše Output informuje rodiče.

Bonus: vlastní názvy vlastností

stejně jako jsme se naučili s @Input() a vytváření vlastních názvů vlastností, můžeme také udělat totéž s @Output().

předpokládejme, že změníme to, (change) vazba na (update):

můžeme se připojit naše vlastní název vlastnosti, při zachování vnitřní @Output název vlastnosti:

v Podstatě jsme jen říkám, Úhlové tu pro vyhledávání update jako vlastnost být vázáni, a můžeme pokračovat v používání this.change interně.

takže to máte, průvodce použitím výstupů s Eventemitterem v komponentách Angular. Nyní rozumíte modelu, šťastné kódování!

naučit Se další techniky, osvědčených postupů a real-svět odborné znalosti, já bych vřele doporučuji mimo kontrolu moje Úhlové kurzy – budou vás prostřednictvím vaší cestě k zvládnutí Úhlové naplno!