美文网首页angualr
Angular2 - 用RouteReuseStrategy暂

Angular2 - 用RouteReuseStrategy暂

作者: Alchemist | 来源:发表于2017-02-22 16:13 被阅读2326次

    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

    相关文章

      网友评论

        本文标题: Angular2 - 用RouteReuseStrategy暂

        本文链接:https://www.haomeiwen.com/subject/nxdmwttx.html