在Angular 2中缓存组件数据应用

问题描述：

我正在使用observables在我的Angular 2应用中加载数据，现在正试图弄清楚如何使用组件的最后一个缓存版本（本地存储中的内容），以便当用户单击一个新选项卡（离开组件），然后再次触发组件的打开（返回） - 它们将获取组件的最后一个状态。在Angular 2中缓存组件数据应用

这在这种情况下尤其重要，部分原因是页面上有筛选器根据用户的选择筛选数据。因此，当他们返回到组件时，我希望这些过滤器仍然适用于数据。

这是从一个组成部分，在那里我订阅观察到有角的OnInit的生命周期挂钩的呼吁：

ngOnInit() { 
    this.filtersService.getByFilter(this.page, this.pagesize, { 
      'services.workflow.status' : 'consulting' 
      }) 
      .subscribe(resRecordsData => { 
       this.records = resRecordsData; 
      }, 
      responseRecordsError => this.errorMsg = responseRecordsError); 

}

这是从服务中观察到的API调用：

getByFilter(page, pagesize, body) { 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    const options = new RequestOptions({ headers: this.headers }); 
    return this.http.post 
    (`${this.url}${this.ver}/customers/search?apikey=${this.key}&page=${page}&pagesize=${pagesize}`, 
    body, options) 
     .map((res: Response) => res.json()) 
     .catch(this.filterErrorHandler); 
} 
    filterErrorHandler(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error').share(); 
}

我还没有遇到像Angular 2这样的缓存情况。它会像检查本地存储是否包含相关数据一样简单吗？或者是否有一种特定于Angular的机制可用于在特定条件下重新加载组件（例如，自上次打开组件后数据发生了变化）？

我建议您使用localStorage作为存储选项来检查[ngrx]（https://github.com/ngrx）。这种方式即使用户刷新页面，他们仍然可以保存数据。 –

我爱ngrx。但在这个特定的情况下，这将是矫枉过正的。 – Ademo

答

有几种选择：

1）使用服务。我有一个简单的例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

2）路由参数。您可以指定必需的，可选的或查询参数。有关详细信息，请参阅此处：Sending data with route.navigate in Angular 2

3）在您的情况下，还有另一个选项是添加/从本地存储重新检索它。但上述两个选项可能表现更好。

不错的选择。我会做一些更多的研究，看看在我的特定用例中哪些最适合。谢谢！ – Ademo

在Angular 2中缓存组件数据应用

相关推荐