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閱讀 134,923評論 18 139
  • 導航是很簡單的,只是不同頁面之間的切換,路由是實現導航的一種。 一個url對應的一個頁面,在angular2中是一...
    賀賀v5閱讀 3,086評論 5 9
  • 前言 今天是2017年3月7日,Angular 2.0目前最新版本是 2.0.0-beta.17。網絡上搜索到的A...
    程序員長春閱讀 3,832評論 1 22
  • 第一節:初識Angular-CLI第二節:登錄組件的構建第三節:建立一個待辦事項應用第四節:進化!模塊化你的應用第...
    接灰的電子產品閱讀 7,929評論 46 17
  • 消除壓力在日常生活中,有效消除壓力的方法有下列各種: 1.運動是最好的“治標式”消除壓力辦法,因為運動就等同于古代...