fix(router): do not reuse common children with different parents

btford · btford · commit 77e8304fc4c5 · 2015-09-09T12:03:59.000-07:00
diff --git a/modules/angular2/src/router/router.ts b/modules/angular2/src/router/router.ts
@@ -248,7 +248,7 @@ export class Router {
     return this._outlet.canReuse(instruction.component)
         .then((result) => {
           instruction.component.reuse = result;
-          if (isPresent(this._childRouter) && isPresent(instruction.child)) {
+          if (result && isPresent(this._childRouter) && isPresent(instruction.child)) {
             return this._childRouter._canReuse(instruction.child);
           }
         });
diff --git a/modules/angular2/test/router/integration/navigation_spec.ts b/modules/angular2/test/router/integration/navigation_spec.ts
@@ -35,6 +35,7 @@ import {RouteRegistry} from 'angular2/src/router/route_registry';
 import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
 
 var cmpInstanceCount;
+var childCmpInstanceCount;
 var log: string[];
 
 export function main() {
@@ -57,6 +58,7 @@ export function main() {
     beforeEach(inject([TestComponentBuilder, Router], (tcBuilder, router) => {
       tcb = tcBuilder;
       rtr = router;
+      childCmpInstanceCount = 0;
       cmpInstanceCount = 0;
       log = [];
     }));
@@ -147,6 +149,27 @@ export function main() {
              });
        }));
 
+    it('should not reuse children when parent components change',
+       inject([AsyncTestCompleter], (async) => {
+         compile()
+             .then((_) => rtr.config([new Route({path: '/team/:id/...', component: TeamCmp})]))
+             .then((_) => rtr.navigate('/team/angular/user/rado'))
+             .then((_) => {
+               rootTC.detectChanges();
+               expect(cmpInstanceCount).toBe(1);
+               expect(childCmpInstanceCount).toBe(1);
+               expect(rootTC.nativeElement).toHaveText('team angular { hello rado }');
+             })
+             .then((_) => rtr.navigate('/team/dart/user/rado'))
+             .then((_) => {
+               rootTC.detectChanges();
+               expect(cmpInstanceCount).toBe(2);
+               expect(childCmpInstanceCount).toBe(2);
+               expect(rootTC.nativeElement).toHaveText('team dart { hello rado }');
+               async.done();
+             });
+       }));
+
     it('should inject route data into component', inject([AsyncTestCompleter], (async) => {
          compile()
              .then((_) => rtr.config([
@@ -256,7 +279,10 @@ class RouteDataCmp {
 @View({template: "hello {{user}}"})
 class UserCmp {
   user: string;
-  constructor(params: RouteParams) { this.user = params.get('name'); }
+  constructor(params: RouteParams) {
+    childCmpInstanceCount += 1;
+    this.user = params.get('name');
+  }
 }
 
 

Original file line number	Diff line number	Diff line change
`@@ -248,7 +248,7 @@ export class Router {`
`248`	`248`	`return this._outlet.canReuse(instruction.component)`
`249`	`249`	`.then((result) => {`
`250`	`250`	`instruction.component.reuse = result;`
`251`		`- if (isPresent(this._childRouter) && isPresent(instruction.child)) {`
	`251`	`+ if (result && isPresent(this._childRouter) && isPresent(instruction.child)) {`
`252`	`252`	`return this._childRouter._canReuse(instruction.child);`
`253`	`253`	`}`
`254`	`254`	`});`