使用 Angular RouteReuseStrategy 缓存(路由)组件
使用 angular routereusestrategy 缓存组件
cache components with angular routereusestrategy
routereusestrategy provider 允许我们控制 angular 路由和组件生命周期的行为。
当我们在组件间切换的时候,angular都会销毁上一个组件,并且创建一个新的组件。在大多数情况下,我们可能不想让它这样工作,因为每次加载一个组件,可能会有很多类似http请求一样的昂贵的操作。
这时候就需要routereusestrategy了。
routereusestrategy是什么
routereusestrategy接口声明了5个方法。
shouldreuseroute
这个方法每次切换路由时都会被调用。future
参数是将要离开的路由,curr
参数是将要加载的路由。如果这个方法返回true
,路由将不会跳转(意味着路由没有发生变化)。如果它返回false
,则路由发生变化并且其余方法会被调用。
shouldreuseroute(future: activatedroutesnapshot, curr: activatedroutesnapshot): boolean { // 默认行为 return future.routeconfig === curr.routeconfig; }
shouldattach
路由刚刚被打开,当我们加载到这个路由的组件上时,shouldattach
会被调用。一旦组件被加载这个方法都会被调用。如果这个方法返回true
,retrieve
方法将会被调用。否则这个组件将会被重新创建。
shouldattach(route: activatedroutesnapshot): boolean;
retrieve
当shouldattach
方法返回true
时这个方法会被调用。提供当前路由的参数(刚打开的路由),并且返回一个缓存的routehandle
。如果返回null
表示没有效果。我们可以使用这个方法手动获取任何已被缓存的routehandle
。框架不会自动管理它,需要我们手动实现。
retrieve(route: activatedroutesnapshot): detachedroutehandle | null;
shoulddetach
当离开当前路由时这个方法会被调用。如果返回true
,store
方法会被调用。
shoulddetach(route: activatedroutesnapshot): boolean;
store
这个方法当且仅当shoulddetach
方法返回true
时被调用。我们可以在这里具体实现如何缓存routehandle
。在这个方法中缓存的内容将会被用在retrieve
方法中。它提供了我们离开的路由和routehandle
。
store(route: activatedroutesnapshot, detachedtree: detachedroutehandle): void;
示例
src/services/route-strategy.service.ts
:
import { routereusestrategy, detachedroutehandle, activatedroutesnapshot } from '@angular/router'; export class routestrategyservice implements routereusestrategy { public static handlers: { [key: string]: detachedroutehandle } = {}; public static deleteroutesnapshot(path: string): void { const name = path.replace(/\//g, '_'); if (routestrategyservice.handlers[name]) { delete routestrategyservice.handlers[name]; } } /** * 判断当前路由是否需要缓存 * 这个方法返回false时则路由发生变化并且其余方法会被调用 * @param {activatedroutesnapshot} future * @param {activatedroutesnapshot} curr * @returns {boolean} * @memberof cacheroutereusestrategy */ public shouldreuseroute(future: activatedroutesnapshot, curr: activatedroutesnapshot): boolean { return future.routeconfig === curr.routeconfig && json.stringify(future.params) === json.stringify(curr.params); } /** * 当离开当前路由时这个方法会被调用 * 如果返回 true 则 store 方法会被调用 * @param {activatedroutesnapshot} route * @returns {boolean} * @memberof cacheroutereusestrategy */ public shoulddetach(route: activatedroutesnapshot): boolean { return true; } /** * 将路由写入缓存 * 在这里具体实现如何缓存 routehandle * 提供了我们离开的路由和 routehandle * @param {activatedroutesnapshot} route * @param {detachedroutehandle} detachedtree * @memberof cacheroutereusestrategy */ public store(route: activatedroutesnapshot, detachedtree: detachedroutehandle): void { routestrategyservice.handlers[this.getpath(route)] = detachedtree; } /** * 路由被导航 如果此方法返回 true 则触发 retrieve 方法 * 如果返回 false 这个组件将会被重新创建 * @param {activatedroutesnapshot} route * @returns {boolean} * @memberof cacheroutereusestrategy */ public shouldattach(route: activatedroutesnapshot): boolean { return !!routestrategyservice.handlers[this.getpath(route)]; } /** * 从缓存读取cached route * 提供当前路由的参数(刚打开的路由),并且返回一个缓存的 routehandle * 可以使用这个方法手动获取任何已被缓存的 routehandle * @param {activatedroutesnapshot} route * @returns {(detachedroutehandle | null)} * @memberof cacheroutereusestrategy */ public retrieve(route: activatedroutesnapshot): detachedroutehandle | null { return routestrategyservice.handlers[this.getpath(route)] || null; } private getpath(route: activatedroutesnapshot): string { // tslint:disable-next-line: no-string-literal const path = route['_routerstate'].url.replace(/\//g, '_'); return path; } }
src/app/app.module.ts
:
import { routereusestrategy } from '@angular/router'; import { routestrategyservice } from '../services/route-strategy.service'; @ngmodule({ ... providers: [ ... { provide: routereusestrategy, useclass: routestrategyservice } ], bootstrap: [appcomponent] }) export class appmodule { }
以上示例运行时会缓存所有路由组件。
实现比如标签页效果时,关闭标签页,调用routestrategyservice
中的deleteroutesnapshot
方法删除已缓存的页面即可。
这里可能会有个问题,如果你不想用这个路由缓存了,请务必删除掉app.module.ts
中的providers
,而不是将routestrategyservice
的shouldreuseroute
始终return true
;这样会出现路由跳转页面不跳转的问题,原因暂时未知。
以下是运行效果图:
the end...
last updated by jehorn, 11/1/2019
上一篇: 图解Elasticsearch的核心概念
下一篇: 鸭胸肉热量是多少?这么吃越吃越瘦