Angular 角度-如果数据已经存在，则不要从API加载组件

我有一个在所有组件中调用的组件应用程序列表。我还有两个组件app-cmp1和app-cmp2

在每个组件app-cmp1和app-cmp2中，我们称之为app-list，app-list从api加载数据。默认情况下，app-list是隐藏的。当用户单击链接时，将打开

---

现在的问题是，每次打开应用程序列表时，都会从api加载数据。如果数据加载一次，是否有办法防止app list调用api

您可以在被叫服务中缓存数据，并在呼叫时检查数据是否可用：

被叫服务内部：

...
data : any ;

fetchData(forceReload : boolean) : Observable<any>{
   if (!forceReload && this.data){
       return of(data) ;
   }
return this.http.get(url)
       .pipe(
        tap(resp => this.data = resp)
        ) ;
}
...

。。。
资料：有；
fetchData（forceReload:boolean）：可观察{
如果（！forceReload&&this.data）{
返回（数据）；
}
返回此.http.get（url）
.烟斗(
点击（resp=>this.data=resp）
) ;
}
...

您可以构建基于可观察的缓存层：

export class CachedDataService {

    private cache: { [index: string]: { reloader: Subject<void>, data: Observable<any> } } = {};

    constructor(private http: HttpClient){}

    public get<T>(url: string, reloadIfExists = false): Observable<T> {
        if (this.cache[url] === undefined) {
            const reloader = new BehaviorSubject<void>(null);
            this.cache[url] = {
                reloader: reloader,
                data: reloader.pipe(
                    switchMapTo(this.http.get<T>(url))
                )
            };
        } else if (reloadIfExists) {
            this.cache[url].reloader.next();
        }
        return this.cache[url].data;
    }

}

导出类CachedDataService{
私有缓存：{[index:string]：{reloader:Subject，data:Observable}}={}；
构造函数（私有http:HttpClient）{}
public get（url:string，reloadIfExists=false）：可观察{
if（this.cache[url]==未定义）{
const reloader=new BehaviorSubject（null）；
this.cache[url]={
重装机：重装机，
数据：reloader.pipe(
switchMapTo（this.http.get（url））
)
};
}else if（重载if存在）{
this.cache[url].reloader.next（）；
}
返回此.cache[url].data；
}
}

这样，您可以根据需要获取数据，并且可以完全控制重新加载程序，该程序将重新加载的数据传播到所有订阅者。

您是否尝试过Ngrx（）？我认为它可以解决像您这样的情况——将视图与数据分开。您可以实现

数据。加载的
在商店中检查，并拥有一个非常干净的组件