Angular2 - 用RouteReuseStrategy暂存route状态

Angular2 版本2.3之后提供了一个实验性的class: RouteReuseStrategy
可以用于暂存路由的状态,在重新跳转回该路由时恢复状态(不用重新初始化component)。

定义:

class RouteReuseStrategy {
[shouldDetach
](https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html#shouldDetach-anchor)(route: ActivatedRouteSnapshot) : boolean

[store
](https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html#store-anchor)(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) : void

[shouldAttach
](https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html#shouldAttach-anchor)(route: ActivatedRouteSnapshot) : boolean

[retrieve
](https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html#retrieve-anchor)(route: ActivatedRouteSnapshot) : DetachedRouteHandle

[shouldReuseRoute
](https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html#shouldReuseRoute-anchor)(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) : boolean

}

说明

shouldDetach(route: ActivatedRouteSnapshot) : boolean

决定是否将当前的路由进行分离并暂存。


store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) : void

存储分离出的路由


shouldAttach(route: ActivatedRouteSnapshot) : boolean

决定当前的路由是否还原


retrieve(route: ActivatedRouteSnapshot) : DetachedRouteHandle

取得之前暂存的路由


shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) : boolean

决定是否重用路由

案例

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldDetach', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug('CustomReuseStrategy:retrieve', route);
        return this.handlers[route.routeConfig.path];//从暂存处取回
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        //在此处可以取得跳转前和跳转后的路由路径
        console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return future.routeConfig === curr.routeConfig;
    }
}

Reference:
https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html
https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,131评论 19 139
  • 导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种。 一个url对应的一个页面,在angular2中是一...
    贺贺v5阅读 3,097评论 5 9
  • 前言 今天是2017年3月7日,Angular 2.0目前最新版本是 2.0.0-beta.17。网络上搜索到的A...
    程序员长春阅读 3,848评论 1 22
  • 第一节:初识Angular-CLI第二节:登录组件的构建第三节:建立一个待办事项应用第四节:进化!模块化你的应用第...
    接灰的电子产品阅读 7,943评论 46 17
  • 消除压力在日常生活中,有效消除压力的方法有下列各种: 1.运动是最好的“治标式”消除压力办法,因为运动就等同于古代...
    米粒2020阅读 288评论 0 0