在多个方法调用上对相同 Subject/Observable 的多个订阅

Question

我有一个按钮，单击该按钮后，我订阅了一个 "data load"。成功加载数据后，我必须显示一个模式。

这是我的代码：

主题和可观察对象：

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 个弹出的模式。

这是实现我的要求的简洁方法吗？ TIA

Answer 1

我认为你不需要单独的 isDataLoaded$。只需订阅 dataSubject 但不订阅 buttonClick。您可以通过调用 fetchData 来触发服务，无需订阅在函数内部。

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

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

在多个方法调用上对相同 Subject/Observable 的多个订阅

Multiple Subscriptions to same Subject/Observable on multiple method calls

javascript

subject

observable

rxjs