strategy works now with child routes

Author: manfredsteyer

app/app.routes.ts

@@ -17,12 +17,12 @@ let APP_ROUTES: Routes = [
         component: HomeComponent
     },
 
+
     {
         path: 'flight-booking',
         loadChildren: './flight-booking/flight-booking.module#FlightBookingModule',
         // canLoad: [AuthLoadGuard]
     },
-
     {
         path: 'bookings',
         component: BookingsComponent

app/shared/router/custom-reuse-strategy.ts

@@ -1,33 +1,47 @@
-import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";
+import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";
 
 export class CustomReuseStrategy implements RouteReuseStrategy {
 
     handlers: {[key: string]: DetachedRouteHandle} = {};
 
+    calcKey(route: ActivatedRouteSnapshot) {
+        let next = route;
+        let url = "";
+        while(next) {
+            if (next.url) {
+                url = next.url.join('/');
+            }
+            next = next.firstChild;
+        }
+        console.debug('url', url);
+        return url;
+    }
+
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        console.debug('CustomReuseStrategy:shouldDetach', route);
+        //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;
+        //console.debug('CustomReuseStrategy:store', route, handle);
+        this.handlers[this.calcKey(route)] = handle;
+        
     }
 
     shouldAttach(route: ActivatedRouteSnapshot): boolean {
-        console.debug('CustomReuseStrategy:shouldAttach', route);
-        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
+        //console.debug('CustomReuseStrategy:shouldAttach', route);
+        return !!route.routeConfig && !!this.handlers[this.calcKey(route)];
     }
 
     retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-        console.debug('CustomReuseStrategy:retrieve', route);
+        //console.debug('CustomReuseStrategy:retrieve', route);
         if (!route.routeConfig) return null;
-        return this.handlers[route.routeConfig.path];
+        return this.handlers[this.calcKey(route)];
     }
 
     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-        console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
-        return future.routeConfig === curr.routeConfig;
+        //console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
+        return this.calcKey(curr) === this.calcKey(future);
     }
 
 }

package.json

@@ -59,15 +59,14 @@
     "@angular/platform-browser-dynamic": "2.3.0-rc.0",
     "@angular/router": "3.3.0-rc.0",
     "@angular/upgrade": "2.3.0-rc.0",
-    "angular-in-memory-web-api": "0.1.15",
     "angular2-oauth2": "1.3.10",
     "bootstrap": "3.3.7",
     "core-js": "^2.4.1",
     "ie-shim": "0.1.0",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-rc.4",
     "systemjs": "0.19.41",
-    "zone.js": "^0.7.2"
+    "zone.js": "^0.7.8"
   },
   "keywords": [
     "Angular2",