Angular serwisy

Question

Dzień dobry,

Mam pytanie odnosnie serwisow w angularze. Uczać sie ostatnio o serwisach i komunikacji miedzy komponentami widzialem, ze bylo to robione tak, ze w serwisie mielismy obiekt Subject<> oraz metode ktora zwracala Observable. Wydaje mi sie to troche robione na okolo, czy nie mozna po prostu zrobic tak, ze zmienna ktorej chcemy uzywac w nazszych komponentach trzymamy w serwisie, np zmiena: string; i po prostu przekazujemy ja poprzez mojService.zmienna? Czy konieczne jest tworzenie Subjectu<>, mteody ktora zwraca Observable skoro mozna sie normalnie odwolac do pola/obiekty poprzez serwis?

Comments

Weź to napisz po ludzku.

Answer 1

Wszystko zależy od tego jakie wartości tam trzymasz i co z nimi dalej robisz. Opiszę Ci to na dwóch przykładach:

1 - Załóżmy, że mamy jakiś serwis configuracyjny dla naszych komponentów o nazwie ConfigurationService. W nim możemy mieć np. metody:

getDeviceType(): DeviceType {}
isLocalEnvironment(): boolean {}

czyli de fakto są to metody, o które odpytujemy w jednym, konkretnym przypadku np. gdy chcemy uzależnić coś od tego na jakim środowisku jesteśmy - jest to przydatne np. gdy masz kilka domen i odpalone na nich środowiska dev widoczne np. dla konkretnych IP, po zalogowaniu itp. itd. Pobierasz jednak np. tę wartość  danej chwili i w sumie można założyć, że jeśli user jest na środowisku prod no to będzie w nim cały czas. Ale oczywiście różne komponenty mogą sobie używać tego serwisu. Generalnie żadne czynniki zewnętrzne raczej nie wpływają w runtime na te elementy.

2 - A teraz weźmy drugi przypadek, w tej samej aplikacji możemy mieć też np. jakiś koszyk pozwalający kupować produkty z katalogu itp. Stan koszyka można by przechowywać w serwisie CartService (są też inne rozwiązania dla takich storage ale nie miejsce na ich omawianie), a w nim np. pole:

private items= new BehaviorSubject<CartItem[]>([]);

pole to przechowuje nam wszystkie przedmioty z naszego koszyka... zauważ, zastosowałem tu Observable (na razie nie analizuj dlaczego BS a nie Subject itp.).

Następnie mógłbym dodać metodę do pobierania aktualnych przedmiotów:

public getItems(): Observable<CartItem[]> {
  return this.items.asObservable();
}

i metodę do zapisu nowego itema:

public addNewItem(item: Item): void {
  this.items.next(item);
}

(oczywiście uproszczenie, żadnej walidacji itp.)

I teraz co się tutaj stało... otóż, w momencie wywołania gdzieś w kontrolerze metody getItems zapinamy się w formie subskrypcji:

// teraz jesteśmy w komponencie Example

public itemsForTemplate: CartItem[];
private itemsSubscription: Subscription;

public constructor(private cart: CartService) {}

public ngOnInit(): void {
  this.itemsSubscription = this.cart.getItems()
    .subscribe(items => this.itemsForTemplate = items);
}

public ngOnDestroy(): void {
  if (itemsSubscription) {
    this.itemsSubscription.unsubscribe();
  }
}

W tym momencie w komponencie podpięliśmy się pod observabla i w takim uproszczeniu nasłuchujemy na wartość itemów z tego serwisu. W tej chwili jakiś inny komponent może np. zaktualizować itemy, np. jakiś button "Dodaj do koszyka" i nasz komponent Example dostanie wtedy nowy stan i zaktualizuje sobie wartość itemów, nie musimy nic więcej sami robić. Dzieje się tak dzięki wywołaniu metody next na obiekcie Observable w naszym serwisie przy dodawaniu nowego itema.

 

Nie wiem czy wyjaśniłem wszystko, wydaje mi się, że w miarę nakreśliłem najważniejsze podstawy :) A co do rodzaju observabli to osobny temat, poczytaj sobie o rxjs dokładnie, o cold i hot observable itp. na medium jest masa artykułów o tym.

Gdyby coś było nie jasne to pisz :)

Answer 2

Możesz nie używać Observable, ale tracisz asynchroniczność.