在Angular 2 App中緩存組件數據

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）路由參數。 您可以指定必需，可選或查詢參數。 有關更多信息，請參閱此內容： 使用Angular 2中的route.navigate發送數據

3）在您的情況下，還有另一個選項是添加/從本地存儲中重新檢索它。 但上述兩個選項可能表現更好。