【问题标题】：Same component used multiple times results in multiple API calls多次使用同一组件会导致多次 API 调用
【发布时间】：2023-02-10 17:29:28
【问题描述】：
我已经调用了 api 来获取徽标，这在同一页面上多次使用。
export class LogoService {
logo$ = this.http.get(...).pipe(shareReplay(1));
构造函数（私有 http: HttpClient）{}
}
这工作得很好，但是我得到的是多次 API 调用，每次我重用这个组件时都会给我相同的结果。无论我想重用它多少次，我怎样才能将它减少到只有一个 API 调用？
【问题讨论】：
标签：
javascript
angular
typescript
http
rxjs
【解决方案1】：
您可以在父组件中进行 API 调用，或者如果您的父组件不是同一个组件，则使用专用服务。
export class LogoService {
logo$ = this.http.get(...).pipe(shareReplay(1));
constructor(private http: HttpClient) {}
}
只需订阅此 logo$ 属性，您就应该从 API 调用中获取所有信息，这些信息只会调用一次。