3 sposoby na komunikację między komponentami Angulara

Ten artykuł kierowany jest do początkujących programistów Angulara - jeśli jesteś seniorem lub midem, prawdopodobnie znasz już wszystkie te techniki.

Jak komunikować się między komponentami? To jest temat, z którym problem ma wielu programistów rozpoczynających swoją przygodę z Angularem. Postanowiłem więc nakreślić trzy najczęstsze podejścia wraz z przykładami, które pasują do różnych przypadków użycia. Można to również zrobić reduxem, ale to temat na oddzielny artykuł.

Wyobraź sobie, że masz w aplikacji boczny pasek. Jest on otwarty lub schowany. Mamy komponent paska bocznego i komponent (lub wiele komponentów), który może go otworzyć/schować lub zapytać o jego stan.

Opiszę trzy sposoby implementacji:

1. Przekazywanie referencji jednego komponentu do drugiego
2. Komunikacja poprzez komponent nadrzędny
3. Komunikacja za pośrednictwem usługi

Każdy z tych przykładów ma demo w StackBlitz i repozytorium Github.

1. Przekazywanie referencji jednego komponentu do drugiego

Tego rozwiązania należy używać wtedy, gdy istnieje zależność między komponentami. Np. przełączanie menu rozwijanie i przycisk rozwijania. Zwykle nie mogą one istnieć bez siebie.

Utworzymy komponent przełączania paska bocznego, który będzie polem formularza. Klikając przycisk, otworzymy/schowamy komponent paska bocznego.

Demo
Github

2. Komunikacja poprzez komponent nadrzędny

Ta technika może zostać użyta, gdy łatwo jest kontrolować współdzielony przez komponenty stan za pośrednictwem nadrzędnego dla nich komponentu, a nie chcesz tworzyć nowej usługi lub pisać dodatkowego dla jednej zmiennej.

Implementacja tego podejścia jest podobna do poprzedniej. Jednak przełącznik paska bocznego nie otrzymuje referencji do komponentu paska bocznego. Zamiast tego komponent nadrzędny posiada właściwość sideBarIsOpened, którą przekazujemy do komponentu paska bocznego.

Demo
Github

3. Komunikacja za pośrednictwem usługi

Ta opcja jest przydatna i powinna być używana wtedy, gdy masz kontrolowany komponent lub jego status jest odbierany przez wiele instancji.

Demo
Github

Jest wiele miejsc w aplikacji, które będą musiały uzyskać dostęp do naszego komponentu paska bocznego. Oto, co z tym zrobimy.

Utworzymy side-bar.service.ts, zyskując:

• side-bar.service.ts
• side-bar.component.ts
• side-bar.component.html

SideBarService będzie miał metodę toggle i event change. Dzięki temu każdy komponent, do którego wstrzykniemy tę usługę, zostanie powiadomiony o otwarciu lub schowaniu paska.

W tym przykładzie ani komponent paska bocznego, ani komponent przełączania paska bocznego, nie mają parametrów wejściowych, ponieważ komunikują się za pośrednictwem usługi.


Oryginał tekstu w języku angielskim przeczytasz tutaj.