如何在多个 Angular 组件之间共享 api 响应？

我试图把我的头绕过去并使用BehaviourSubject在 Angular 中（到目前为止还没有太多运气）。我的目标是在我的组件之间共享 api 请求响应。

这是我的项目的 stackblitz 设置：

https://stackblitz.com/edit/angular-ivy-3cql7e?file=src%2Fapp%2Fapcaller.service.ts https://stackblitz.com/edit/angular-ivy-3cql7e?file=src%2Fapp%2Fapicaller.service.ts

在控制台/网络选项卡中，当前向 api 发出了三个请求。

我怎样才能使用这些，以便只使用一个 api 请求component1 and component2

为了直观地概述这个问题，下面是一个快速图表：

                +-------------------+                              
                |                   |                              
                | apicaller.service | (api being called here)      
                |                   |                              
                +-------------------+                              
                                                                   
          +----------+      +-------------+                        
          |component1|      |component2   |                        
          +----------+      +-------------+                        
                  Use only 1 api call                              
                  to get data across                               
                  x amount of components                           
                                               

你的方法中有错误的代码getData()在您的服务中 - 每次新的 http 请求时它都会返回而不是共享一个。只需在服务中添加另一个可观察属性即可解决此问题。添加内管shareReplay()在第一次订阅后使这个 observable 变得热，然后它会共享数据。像这样：

private readonly request: Observable<Array<Object>> = this._http
  .get('https://swapi.dev/api/people/')
  .pipe(
    map((result: Object) => result['results']), 
    shareReplay(),
  );

getData(): Observable<Array<Object>> {
  console.log(Math.random() * 100 + ' getData()');
  // count api request
  // return as array of objects
  return this.request;
}