diff --git a/packages/router/src/create_router_state.ts b/packages/router/src/create_router_state.ts index 261fc14bcf..842987467d 100644 --- a/packages/router/src/create_router_state.ts +++ b/packages/router/src/create_router_state.ts @@ -30,16 +30,19 @@ function createNode( return new TreeNode(value, children); // retrieve an activated route that is used to be displayed, but is not currently displayed - } else if (routeReuseStrategy.retrieve(curr.value)) { - const tree: TreeNode = - (routeReuseStrategy.retrieve(curr.value)).route; - setFutureSnapshotsOfActivatedRoutes(curr, tree); - return tree; - } else { - const value = createActivatedRoute(curr.value); - const children = curr.children.map(c => createNode(routeReuseStrategy, c)); - return new TreeNode(value, children); + const detachedRouteHandle = + routeReuseStrategy.retrieve(curr.value); + if (detachedRouteHandle) { + const tree: TreeNode = detachedRouteHandle.route; + setFutureSnapshotsOfActivatedRoutes(curr, tree); + return tree; + + } else { + const value = createActivatedRoute(curr.value); + const children = curr.children.map(c => createNode(routeReuseStrategy, c)); + return new TreeNode(value, children); + } } } diff --git a/packages/router/test/create_router_state.spec.ts b/packages/router/test/create_router_state.spec.ts index 7404460454..d69c2cc6e6 100644 --- a/packages/router/test/create_router_state.spec.ts +++ b/packages/router/test/create_router_state.spec.ts @@ -88,6 +88,27 @@ describe('create router state', () => { checkActivatedRoute(currC[0], ComponentA); checkActivatedRoute(currC[1], ComponentB, 'right'); }); + + it('should cache the retrieved routeReuseStrategy', () => { + const config = [ + {path: 'a', component: ComponentA}, {path: 'b', component: ComponentB, outlet: 'left'}, + {path: 'c', component: ComponentC, outlet: 'left'} + ]; + spyOn(reuseStrategy, 'retrieve').and.callThrough(); + + const prevState = + createRouterState(reuseStrategy, createState(config, 'a(left:b)'), emptyState()); + advanceState(prevState); + + // Expect 2 calls as the baseline setup + expect(reuseStrategy.retrieve).toHaveBeenCalledTimes(2); + + // This call should produce a reused activated route + const state = createRouterState(reuseStrategy, createState(config, 'a(left:c)'), prevState); + + // Verify the retrieve method has been called one more time + expect(reuseStrategy.retrieve).toHaveBeenCalledTimes(3); + }); }); function advanceState(state: RouterState): void {