如何在本地存储角度 6 中保存过滤器？

Question

我需要保留应用的过滤器。当我更改组件或返回到前一个组件时，我希望过滤器已经应用（保持不变）。我需要添加一个函数来将过滤器参数保存在 localStorage 中，并添加一个函数来读取这些参数。有人可以帮忙吗？

Answer 1

您可以像这样使用LocalStorage：

localStorage.setItem('componantAFilters', JSON.stringify(filterObj))

localStorage.getItem('componantAFilters')

我的建议是在ngOnInit 中调用getItem 和在ngOnDestroy 中调用setItem

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

为了将过滤器参数保存在本地存储中：

import { SESSION_STORAGE, WebStorageService } from 'angular-webstorage-service';

那么在同一个组件的构造函数中：

constructor(@Inject(SESSION_STORAGE) private storage: WebStorageService) {
  this.storage.set('filters', JSON.stringify(this.filters));
}

为了获得这些过滤器：

this.storage.get('filters');

Answer 3

虽然@S.Voulgaris 和@Yonatan Lilling 给出的答案可能在一定程度上有效，但它也有其缺点。按照将所有过滤器保存在本地存储中，然后检索这些过滤器，然后应用到组件的方法，编写恢复逻辑很麻烦。

更好的方法是缓存旧组件/路由并从缓存中显示。从 2.3 版开始，Angular 确实对此提供了原生支持。

每次导航后应用重定向时，Angular 都会创建一个 RouteStateSnapshot。 RouteStateSnapshot 是一个存储 ActivatedRouteSnapshots 树的不可变对象。如果您不知道，请阅读它。当我们导航到新页面或只是更改 URL 参数时，我们会得到新的 RouteStateSnapshot。

RouteReuseStrategy 是自定义 Angular 何时应重用路由快照或更简单的说法何时应重用页面的角度方式（不再需要手动恢复，涉及 http 调用）。

创建一个类 MyRouteReuseStrategy 扩展 RouteReuseStraty

export class MyRouteReuseStrategy implements RouteReuseStrategy { 

    private states: {[key: string]: DetachedRouteHandle} = {};

    constructor() {

    }

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        this.states[route.url.join("/") || route.parent.url.join("/")] = handle;    
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this.states[url];    
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        return this.states[route.url.join("/") || route.parent.url.join("/")];    
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot):boolean {
       return future.routeConfig === curr.routeConfig;
    }
}

然后在你的应用模块中使用它作为提供者

@NgModule({
[...],
providers: [
    {provide: RouteReuseStrategy, useClass: MyRouteReuseStrategy }
]
)}
export class AppModule {
}

就是这样。您可以根据您的应用需求自定义 MyRouteReuseStrategy 类的方法（您可能不希望缓存某些组件，例如注销或显示实时数据的页面等）。