Question

上下文：我有一个服务S调用服务器中的数据，还有三个组件A，B和C调用此服务以获取相同的数据。在Angular 2+中，是否有一种方法可以告诉组件B和C，服务调用已经由A调用，而只是等待数据处理？

在这种情况下，我认为我需要使用缓存或Observable，但我无法想象该怎么做？

编辑

我的服务S：

currentAccount<Account>;

getCurrentAccount(): Observable<Account> {
    if (this.currentAccount && this.currentAccount.id) {
      return Observable.of(this.currentAccount);
    } else {
      return this.http.get<Account>(this.url).pipe(
        tap(account => {
          this.currentAccount = account;
    }));
}

组件A，B和C现在：

this.service.getCurrentAccount().subscribe(account => {
    // Do something
});

想象一下，我在同一个容器中拥有上述所有3个组件。我应该如何调用BehaviorSubject？这3个组件也可以在其他页面中使用，它将单独存在并且需要调用数据本身。

Answer 1

当然。由于这是共享服务，因此可以从此服务BehaviorSubject公开asObservable。然后从所有三个组成部分subscribe开始使用它。

一旦在服务中获取了数据，就可以在此next上以及在这三个BehaviorSubject的所有subscribe中调用BehaviorSubject方法。 / p>

这就是将其转换为代码的方式：

共享服务：

private sharedData: BehaviorSubject<any> = new BehaviorSubject<any>(null);
sharedData$ = this.sharedData.asObservable();

getData() {
  this.http.get('YOUR_API_URL').subscribe(data => this.sharedData.next(data));
}

组件A：

this.sharedService.sharedData$.subscribe(data => this.data = data);
this.sharedService.getData();

组件B和组件C：

this.sharedService.sharedData$.subscribe(data => this.data = data);

更新：

考虑到您不想多次调用，您可以直接将sharedData作为对象公开。对象是通过JavaScript中的引用传递的。因此，在所有三个组件中注入SharedService，然后引用sharedData对于所有三个组件都是相同的。如果sharedData更改了一个组件（例如A），则组件B和C也会共享它们对内存中同一对象的引用，这也会反映出来。

您的SharedService的实现将更改为以下内容：

sharedData;

getData() {
  return this.http.get('YOUR_API_URL').pipe(
    tap(data => this.sharedData = data)
  );
}

现在，在检查getData是否为sharedData之后，只需在任何组件中调用此undefined方法即可。

所以在所有组件A，B和C中，

if(this.sharedService.sharedData) {
  // Use sharedData
  this.data = this.sharedService.sharedData;
}
else {
  this.sharedService.getData().subscribe(data => this.data = data);
}

减少Angular 2组件的服务要求

1 个答案: