From 83b97c485ba3ed80d9155150e2300d0dad192187 Mon Sep 17 00:00:00 2001
From: Brian Ford <btford@umich.edu>
Date: Fri, 15 May 2015 15:55:26 -0700
Subject: [PATCH] refactor(router): use DynamicComponentLoader instead of
 ViewContainer

---
 modules/angular2/src/router/router_outlet.js | 41 ++++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/modules/angular2/src/router/router_outlet.js b/modules/angular2/src/router/router_outlet.js
index 3309153c12..09c8491443 100644
--- a/modules/angular2/src/router/router_outlet.js
+++ b/modules/angular2/src/router/router_outlet.js
@@ -3,7 +3,7 @@ import {isBlank, isPresent} from 'angular2/src/facade/lang';
 
 import {Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {Attribute} from 'angular2/src/core/annotations_impl/di';
-import {Compiler, ViewContainerRef} from 'angular2/core';
+import {DynamicComponentLoader, ComponentRef, ElementRef} from 'angular2/core';
 import {Injector, bind} from 'angular2/di';
 
 import * as routerMod from './router';
@@ -31,21 +31,24 @@ import {Instruction, RouteParams} from './instruction'
   selector: 'router-outlet'
 })
 export class RouterOutlet {
-  _compiler:Compiler;
   _injector:Injector;
   _parentRouter:routerMod.Router;
   _childRouter:routerMod.Router;
-  _viewContainer:ViewContainerRef;
+  _loader:DynamicComponentLoader;
+  _componentRef:ComponentRef;
+  _elementRef:ElementRef;
 
-  constructor(viewContainer:ViewContainerRef, compiler:Compiler, router:routerMod.Router, injector:Injector, @Attribute('name') nameAttr:String) {
+  constructor(elementRef:ElementRef, loader:DynamicComponentLoader, router:routerMod.Router, injector:Injector, @Attribute('name') nameAttr:String) {
     if (isBlank(nameAttr)) {
       nameAttr = 'default';
     }
+    this._loader = loader;
     this._parentRouter = router;
-    this._childRouter = null;
-    this._viewContainer = viewContainer;
-    this._compiler = compiler;
+    this._elementRef = elementRef;
     this._injector = injector;
+
+    this._childRouter = null;
+    this._componentRef = null;
     this._parentRouter.registerOutlet(this, nameAttr);
   }
 
@@ -53,26 +56,30 @@ export class RouterOutlet {
    * Given an instruction, update the contents of this viewport.
    */
   activate(instruction:Instruction): Promise {
-    // if we're able to reuse the component, we just have to pass along the
+    // if we're able to reuse the component, we just have to pass along the instruction to the component's router
+    // so it can propagate changes to its children
     if (instruction.reuse && isPresent(this._childRouter)) {
       return this._childRouter.commit(instruction);
     }
-    return this._compiler.compileInHost(instruction.component).then((pv) => {
-      this._childRouter = this._parentRouter.childRouter(instruction.component);
-      var outletInjector = this._injector.resolveAndCreateChild([
-        bind(RouteParams).toValue(new RouteParams(instruction.params)),
-        bind(routerMod.Router).toValue(this._childRouter)
-      ]);
 
-      this._viewContainer.clear();
-      this._viewContainer.create(pv, 0, null, outletInjector);
+    this._childRouter = this._parentRouter.childRouter(instruction.component);
+    var outletInjector = this._injector.resolveAndCreateChild([
+      bind(RouteParams).toValue(new RouteParams(instruction.params)),
+      bind(routerMod.Router).toValue(this._childRouter)
+    ]);
+
+    if (isPresent(this._componentRef)) {
+      this._componentRef.dispose();
+    }
+    return this._loader.loadNextToExistingLocation(instruction.component, this._elementRef, outletInjector).then((componentRef) => {
+      this._componentRef = componentRef;
       return this._childRouter.commit(instruction);
     });
   }
 
   deactivate():Promise {
     return (isPresent(this._childRouter) ? this._childRouter.deactivate() : PromiseWrapper.resolve(true))
-        .then((_) => this._viewContainer.clear());
+        .then((_) =>this._componentRef.dispose());
   }
 
   canDeactivate(instruction:Instruction): Promise<boolean> {