Standardowo zmienne są enkapsulowane w komponencie. Jak poradzić sobie, gdy potrzebujemy dostęp do zmiennej między komponentami? Komunikacja między komponentami w Angular może odbywać się w zależności od relacji między:

  • rodzicem a dzieckiem (Input)
  • dzieckiem a rodzicem (Output)
  • …ale i również pomiędzy równorzędnymi komponentami, czyli rodzeństwem (siblings)

W tym wpisie chce pokazać rozwiązanie, które pomogło mi na wymianę danych pomiędzy równorzędnymi komponentami, ale rozwiązanie pozwala po prostu na komunikację między komponentami. Wykorzystałam Observable & Subject  (który jest typem Observable).

Przede wszystkim zmienna musi się znaleźć w serwisie, a nie komponencie. Aby ustawiać nową wartość wykorzystujemy Subject.next(), a żeby odczytywać aktualny stan Observable.subject(). 

Nasz serwis z wykorzystaniem obserwatora prezentuje się następująco:

Teraz wykorzystując serwis możemy ustawiać wartość zmiennej subject przez wykorzystanie funkcji  sendMessage, importantMessage czy getMessage.
Możemy także w innym komponencie wypisać aktualną wartość wykorzystując funkcję  getMessage() i wykonanie na niej metody subscribe().

Teraz w każdym komponencie dzięki serwisowi możemy uaktualniać wartość zmiennej i ją pobierać.

Author: