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

Question

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

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

这是来自组件的调用，我使用 Angular 的 OnInit 生命周期钩子订阅 observable：

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，我之前没有遇到过这样的缓存情况。它会像执行 if 检查以查看本地存储是否包含相关数据一样简单吗？或者是否有一种特定于 Angular 的机制，我可以使用它仅在某些条件下重新加载组件（例如，如果自上次打开组件后数据发生了变化）？

Answer 1

有几种选择：

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

2) 路由参数。您可以指定必需的、可选的或查询参数。更多信息请参见：Sending data with route.navigate in Angular 2

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