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这样的缓存情况。它会像检查本地存储是否包含相关数据一样简单吗？或者是否有一个特定于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）在您的情况下，还有另一个选项是添加/从本地存储中重新检索它。但上述两个选项可能表现更好。

在Angular 2 App中缓存组件数据

1 个答案: