Aplikacja, która na każdym komponencie powinna reagować na zmianę globalnego obiektu w menu

0

Witam.
Kolejne Angularowe pytanie z serii (najprawdopodobniej) głupich.
Piszę mini ERP w Angular. Mam API do wymiany danych i wszystko sobie działa oprócz jednej kwestii, w której robię chyba nie za dobre objeścia.
W menu głownym na środku jest guzik, który odpowiada za globalnego kontrahenta. Jeśli jest on wybrany system pokazuje tylko jego dokumenty, rozliczenia, zaległości itp. itd.

Problem polega na tym, że wybór tego kontrahenta nie filtruje mi danych dynamicznie (muszę odświeżyć stronę).

  1. Niestety ngDoCheck() odpada, ponieważ zmiana kontrahenta powoduje zapętlenie się tej metody i wczytuje dane w nieskończoność.

  2. Wywołanie ngOnInit() aktywnego komponentu wydaje się nie być optymalnym rozwiązaniem.

  3. Znalazłem gdzieś w internetach, że można takie rzeczy ogarnąć w url, w sensie ActivatedRoute i subskrybować queryParams, tylko jak takie url budować gdy kliknę na button z kontrahentem? Musiałbym zrobić navigate, a to mi przeładuje stronę. Musiałbym stworzyć jakiś Service, który by w odpowiedni sposób taki url generował?

  4. Input() i Output() niestety działa tylko przy komponencie nadrzędnym app.component i podrzędnym header.component, w przypadku <router-outlet> zaczyna się problem, a komponenty dokumentów, rozliczeń są w <router-outlet>

Oczywiście wybrany kontrahent jest zapisywany do sessionStorage lub localStorage, stąd po refreshu mi wszystko działa.
Jest jakieś sensowne rozwiązanie tego problemu?

PS.
Kod jest dość chaotycznie porozrzucany, żeby załapać sens tego co już napisałem. Jeśli koniecznie ktoś będzie chciał to jakoś wrzucę.

1

Możesz do tego użyć serwisu z polem typu subject, która będzie emitowała observable gdy wybrany kontrahent zostanie zmieniony, a w subskrypcji tego observable możesz sobie reagować w każdym komponencie do woli.

export class MyService {
  private _clientChanged = new Subject();

  get clientChanged() {
    return this._clientChanged.asObservable();
  }

  getClient(id: number) {

    //tu pobierasz klienta np. z restowego api

    this._clientChanged.next();
  }
}

export class MyComponent {
  constructor(private myService: MyService) {
    myService.clientChanged.subscribe(_ => {
      //tu reagujesz na zmianę klienta
    }
  }
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1