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

Question

我正试着把我的头绕在&在Angular中使用BehaviourSubject(到目前为止还没有多少运气)。我的目标是在组件之间共享api请求响应。

这是我的项目的stackblitz设置:

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

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

我如何与这些工作，以便只有一个api请求用于component1和component2

---

对于这个问题的直观概述，这里有一个快速的图表:

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

Answer 1

您在服务中的getData()方法中有错误的代码-它每次返回一个新的http请求而不是共享一个。只需在服务中添加另一个可观察属性就可以解决这个问题。在管道内添加shareReplay()，使这个可观察对象在第一次订阅后成为热点，然后它将共享数据。这样的:

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;
}