zdarzenia komponentowe z EventEmitter i @Output w Angular

elementy kątowe są podstawowymi elementami architektury. Gdy już zrozumiesz architekturę komponentów, możesz zbudować w głowie obraz tego, jak złożyć interfejs w oparciu o komunikację danych.

w tym poście zajmiemy się komponentami kątowymi i tym, jak używać Eventemittera i wyjść, abyśmy mogli przesłać lub powiadomić dowolny komponent nadrzędny, że coś się zmieniło, lub chcielibyśmy to zmienić. Zazwyczaj odbywa się to za pomocą “zdarzeń”, stąd nasz “EventEmitter” i jest zaprojektowany wokół jednokierunkowego systemu przepływu danych, który przyjmuje znacznie bardziej rozsądne podejście do tworzenia aplikacji.

zakończmy podstawy komunikacji rodzic-dziecko i dziecko-rodzic, wprowadzając EventEmitteri @Output.

Seria

1. uruchamianie pierwszej aplikacji kątowej
2. Tworzenie pierwszego komponentu kątowego
3. Przekazywanie danych do komponentów kątowych za pomocą @Input
4. zdarzenia komponentu za pomocą Eventemittera i @Output w Angular

wprowadzenie

ten samouczek obejmie zdarzenia komponentu bezstanowego przy użyciu API EventEmitter i dekoratora @Output. Pozwalają nam one emitować zmiany lub dowolne niestandardowe nazwy zdarzeń z niestandardowego komponentu w Angular.

ten post pochodzi z poprzedniego artykułu na temat przekazywania danych w komponentach kątowych z @Input, więc koniecznie przeczytaj to najpierw!

Wiązanie komponentu Stanowego (rodzica)

podobnie jak w poprzednim samouczku, gdzie ustawiamy dekorator @Input, aby akceptował Wiązanie wejściowe, możemy zrobić to samo i nasłuchać rodzica, gdy wartość zmieni się wewnątrz komponentu potomnego.

aby to zrobić, wrócimy do naszego komponentu nadrzędnego, który renderuje naszą liczbę:

zrobiłem kilka dodatków tutaj:

• zmieniono initialCount na myCount, nie ustawiamy już “initialCount”, dlatego stan zliczania będzie zarządzany w rodzicu, gdy komponent potomny zmieni go
• utworzy niestandardową właściwość change do szablonu <counter>, używając () składni wiązania zdarzeń, jak dowiedzieliśmy się, gdy utworzyliśmy nasz pierwszy komponent, oznacza to pewnego rodzaju Zdarzenie (np. click w przypadku użycia na natywnym węźle elementu).
• zalogował właściwość myCount w rodzicu
• dodał metodę countChange() {} do klasy i przekazał ją do słuchacza zdarzeń (change)

🎉 pobierz za darmo!

Wyjdź poza tablicę ForEach. Zyskaj pewność dzięki bardziej zaawansowanym metodom, takim jak Reduce, Find, Filter, Every, Some i Map i w pełni zrozum, jak zarządzać strukturami danych JavaScript.

• w pełni zrozumieć, jak zarządzać strukturami danych JavaScript za pomocą niezmiennych operacji
• 31 strony ze składnią głębokiego nurkowania, przykładami, poradami i sztuczkami
• napisz czystszą i lepiej zorganizowaną logikę programowania w ciągu 3 godzin

✅ sukces! Sprawdź swój e-mail, ciesz się.

jako dodatkowy bonus wyślemy Ci również kilka dodatkowych gadżetów w kilku dodatkowych e-mailach.

to tworzy nasz ostateczny jednokierunkowy przepływ danych. Dane płyną z klasy AppComponent do”, licznik może następnie zmienić wartości-a po zmianie wartości oczekujemy wywołania countChange(). Musimy to podłączyć.

@Output decorator

podobnie jak przy użyciu Input, możemy zaimportować Output i udekorować nową change nieruchomość wewnątrz naszej CounterComponent:

spowoduje to skonfigurowanie metadanych niezbędnych do poinformowania Angular, że ta właściwość ma być traktowana jako powiązanie wyjściowe. Jednak musi siedzieć obok czegoś, co nazywa się EventEmitter.

EventEmitter

to jest ciekawa część. Aby móc użyć naszego Output, musimy zaimportować i powiązać do niej nową instancję EventEmitter:

używając w pełni języka TypeScript, zrobilibyśmy coś takiego, aby określić typ wartości zdarzenia, które emitujemy, a nasze wyjście change jest typu EventEmitter. W naszym przypadku emitujemy number Typ:

wywoływanie Eventemittera

więc co tu się dzieje? Stworzyliśmy właściwość change i powiązaliśmy z nią nową instancję EventEmitter – co dalej?

możemy po prostu wywołać naszą metodę this.change – jednak ponieważ odwołuje się do instancji EventEmitter, musimy wywołać .emit(), aby wyemitować Zdarzenie do rodzica:

to wtedy wyemituje zmianę do naszego słuchacza (change) ustawiamy w rodzicu, do którego zostanie wywołane nasze wywołanie zwrotne countChange($event), a dane związane z tym zdarzeniem zostaną nam przekazane poprzez $event własność.

Stateful callback assignment

oto, co musimy zrobić, ponownie przypisać this.myCount z event, który został przekazany z powrotem. Wyjaśnię dlaczego poniżej:

tworzy to czysty jednokierunkowy przepływ danych. Dane pochodzą z AppComponent, przepływają do naszego licznika, licznik dokonuje zmiany i emituje te zmiany z powrotem do rodzica na nasze polecenie-poprzez EventEmitter ustawiamy. Gdy już odzyskamy te dane, łączymy te zmiany z powrotem do naszego komponentu nadrzędnego (stanowego).

powodem, dla którego to robimy, jest pokazanie, że Parent: {{ myCount }} aktualizuje się w tym samym czasie, gdy nasz Output informuje rodzica.

Bonus: niestandardowe nazwy właściwości

podobnie jak nauczyliśmy się z @Input() i tworząc niestandardowe nazwy właściwości, możemy również zrobić to samo z @Output().

Załóżmy, że zmieniamy Wiązanie (change) na (update):

możemy podłączyć naszą niestandardową nazwę właściwości, zachowując wewnętrzną nazwę właściwości @Output:

zasadniczo mówimy tutaj Angular, aby wyszukał update jako właściwość, do której ma być przypisana, i możemy nadal używać wewnętrznie this.change.

więc masz to, przewodnik po używaniu wyjść z Eventemitterem w komponentach Angulara. Teraz rozumiesz model, szczęśliwe kodowanie!

aby dowiedzieć się więcej o technikach, najlepszych praktykach i prawdziwej wiedzy eksperckiej, Gorąco polecam zapoznanie się z moimi kursami Angular-poprowadzą Cię przez Twoją podróż do opanowania Angulara w pełni!