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种模式。

实现要求是一种干净的方法吗？ TIA

Answer 1

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

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

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

同一主题的多个订阅/可在多个方法调用上观看

1 个答案: