Angular Observable.subscribe() nie działa w serwisie

Question

Witam.

W angularowej aplikacji utworzyłem serwis, którego zadaniem miało być odczytywanie parametru z routingu. Użyłem właściwości params obiektu ActivatedRoute, która jest Observable. Zasubskrybowałem ją i nie działa. Z tego co udało mi się wywnioskować, to callback przekazany do subscribe() odpala się tylko raz przy starcie aplikacji a potem już nie. Nie ważne ile razy zmieni się parametr w routingu. Czy dobrze myślę, że winna jest tu propertka params? Czy jej wartość jest ustalana tylko raz przy załadowaniu komponentu? Czy może problem polega na czymś innym? Z tego co widziałem w kursach Angulara, to można używać Observable w serwisach, więc dlaczego mi nie działa?

Poniżej wrzucam kod serwisu:

import { Injectable, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class LangCheckService {

  private id: any;

  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(param => {
      this.id = param['langId'];
      // Logi wstawione po to, żeby sprawdzić czy subscribe w ogóle wywołuje callbacka
      console.log(param['langId']);
      console.log('Wykonanie callbacka w subscribe');
    });
  }


  checkId() {
    if(this.id != 'pl' && this.id != 'en' && this.id != undefined) {
      this.router.navigate(['/404']);
    }
    else return this.id;
  }
}

Dodam tylko, że dokładnie ten sam kod użyty w komponencie działa bez zarzutu a w serwisie nie chce.

Z góry dzięki za pomoc.

Pozdrawiam.

Answer 1

Według mnie w serwisie nie działa z jednego powodu: ActivatedRoute jest powiązany z komponentem. Twój serwis jest tworzony przy tworzeniu AppComponentu, więc dostaje ActivatedRoute AppComponentu. W komponencie działa, bo zmienia się komponent. ActivatedRoute lepiej wstrzykiwac w komponencie.

https://angular.io/api/router/ActivatedRoute

Comments

Dzięki :)

Czyli jednak problem nie leży po stronie serwisu. To w takim razie mam inne pytanie. Skoro odczyt parametru z routingu będzie wykonywany przez różne komponenty, a nie chcę powtarzać tego samego kodu, to jaki w tej sytuacji byłby najlepszy sposób żeby tą funkcjonalność wyodrębnić gdzieś na zewnątrz żeby każdy komponent zainteresowany parametrem mógł sobie zaimportować/wywołać odpowiednią metodę?

---

Nie wiem w sumie. Serwis nie powinien nie powinien sam decydować skąd ma zostać pobrana wartość atrybutu (np z URL), tylko pozostawić możliwość tego wyboru np komponentowi. Według mnie pobieranie wartości z QueryParams czy Params w komponencie (nawet jeżeli wiąże się to z duplikowaniem kodu) nie jest złym sposobem. Alternatywą byłoby wstrzykiwanie dodatkowego serwisu, który byłby osobno tworzony dla każdego komponentu i oddelegowac tą logikę do niego. Tylko pytanie, czy jest sens aż tak kombinować?

PS: Funkcje nie funkcjonalność :D Funkcjonalność to pojęcie abstrakxyjne

---

Ok rozumiem. Jestem amatorem, więc czasem używam tej całej terminologii nie do końca poprawnie :)

Co do tej duplikacji kodu, to chyba tak właśnie zrobię, że puki co uznam, że na chwilę obecną jest to dobre rozwiązanie. Chyba, że kiedyś ktoś pokaże mi lepszy sposób. A może nawet twórcy Angulara w kolejnej wersji wprowadzą jakieś narzędzie, które pomoże zrobić to lepiej.

Tak czy inaczej dzięki za odpowiedzi i pomoc :)

Answer 2

Z tego co mi się wydaje, to w konstruktorze tego nie powinieneś robić (jeśli chcesz się do tego odwołać więcej niż jeden raz). Może zobacz co się stanie dla np onInita() lub onChange()?

Comments

Z tego co wiem, to Lifecycle Hooks, czyli zarówno OnInit jak i OnChange nie działają w ogóle w komponentach @Injectable, a zatem w żadnym serwisie się ich nie implementuje. Coś takiego znalazłem w sieci, ale nie jestem na 100% tego pewien.

---

a probowałeś EventEmitera?

---

Nie próbowałem. Nawet na to nie wpadłem i szczerze mówiąc na chwilę obecną nawet nie bardzo wiem jak w tym przypadku użyć EventEmitera. Musiałbym zajrzeć do dokumentacji.

Ale dzięki za sugestię, może to jest dobry trop.  :)