减少Angular 2组件的服务调用

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调用？这三个组件也可以用在其他页面中，它将保持独立并需要调用数据本身。

Answer 1

当然。由于这是一个共享服务，您可以从此服务BehaviorSubject中公开asObservable。然后subscribe来自所有三个组件。

一旦在服务中获取数据，您可以在此next和所有三个组件中调用BehaviorSubject方法，subscribe到此BehaviorSubject。

这就是它如何转换成代码：

共享服务：

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作为Object公开。对象在JavaScript中通过引用传递。因此，在所有三个组件中注入SharedService然后引用sharedData对于所有三个组件都是相同的。如果sharedData为一个组件（例如A）更改，那么它也会反映在组件B和C中，因为它们将ref共享给内存中的同一个对象。

然后，您对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);
}