Несколько подписок на один и тот же объект / наблюдаемый при нескольких вызовах методов

Question

У меня есть кнопка, при нажатии которой я подписываюсь на «загрузку данных». При успешной загрузке данных мне нужно отобразить модальное.

Вот мой код:

Предмет и наблюдаемый:

dataSubject = new Subject<boolean>();
isDataLoaded$: Observable<boolean> = this.dataSubject.asObservable(); 

Метод выборки данных: (Это отдельный метод, потому что он используется в нескольких местах, а не только для заполнения модальных данных.)

fetchData() {
  this.dataSubject.next(false);
  ...
  // Fetch Some Data
  ...
  this.dataSubject.next(true);
}

Метод нажатия кнопки:

buttonClick() {
  // fetch data
  this.fetchData();

  // once the data is loaded, display the modal
  this.dataSubscription = this.isDataLoaded$.subscribe((isDone) => {
    if (isDone) {
      this.displayModal();
    }
  });
}

Когда я нажимаю кнопку в первый раз, она работает нормально и отображает модальный режим. Когда я нажимаю второй или более раз, я получаю несколько экземпляров модального всплывающего окна. Из того, что я понимаю, я подписываюсь несколько раз и, следовательно, несколько модалов. Я также пытался отменить подписку перед подпиской, чтобы убедиться, что у меня есть одна подписка, но даже тогда я получаю по крайней мере 2 модала, которые появляются.

Это чистый способ выполнить мое требование? ТИА

Answer 1

Тебе не нужны отдельные isDataLoaded$ Я думаю. Просто подпишитесь на dataSubject, но не внутри buttonClick. Вы вызываете serivce с вызовом fetchData без необходимости подписки, чтобы быть внутри функции.

this.dataSubscription = this.dataSubject.subscribe((isDone) => {
    if (isDone) {
      this.displayModal();
    }
});

buttonClick() {
  // fetch data
  this.fetchData();
}