Javascript 对同一主题的多个订阅/可在多个方法调用中观察到

我有一个按钮，点击它，我订阅一个“数据加载”。成功加载数据后，我必须显示一个模式

这是我的密码：

受试者和可观察者：

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

按钮点击方式：

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

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

当我第一次单击按钮时，它工作正常并显示模式。当我第二次或多次单击时，我会得到多个模态弹出窗口实例。据我所知，我订阅了多次，因此使用了多种模态。 我也尝试过在订阅之前取消订阅，以确保我有一个订阅，但即使这样，我至少会弹出两个模态

---

这是实现我的需求的干净方法吗？TIA

我想你不需要单独的

isataloaded$

。只需订阅

dataSubject

，但不要在

按钮内单击
。您可以通过调用
fetchData
触发服务，无需在函数内部订阅

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

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

你不想每次点击按钮时都调用displayModal吗？你是何时/如何取消订阅的？@abetteroliver我用两种方法尝试了它1）在“按钮点击”中，在订阅之前，检查订阅是否存在并取消订阅。然后再订阅。2） 在“displayModal”中，检查订阅是否存在并取消订阅。但是这两个问题都没有解决我的问题我认为最好的取消订阅的地方是在
if（isDone）{
之前。也试过了，运气不好！
this.dataSubscription = this.dataSubject.subscribe((isDone) => {
    if (isDone) {
      this.displayModal();
    }
});

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