refactor(NavController): use ng2 loadNextToLocation

ionic/components/nav/nav-controller.ts

@@ -527,41 +527,13 @@ export class NavController extends Ion {
    * @private
    * TODO
    */
-  createViewComponentRef(type, hostProtoViewRef, viewContainer, viewCtrlBindings) {
+  loadNextToAnchor(type, location, viewCtrl) {
-    let bindings = this.bindings.concat(viewCtrlBindings);
+    let bindings = this.bindings.concat(Injector.resolve([
-
-    // the same guts as DynamicComponentLoader.loadNextToLocation
-    var hostViewRef =
-        viewContainer.createHostView(hostProtoViewRef, viewContainer.length, bindings);
-    var newLocation = this._viewManager.getHostElement(hostViewRef);
-    var component = this._viewManager.getComponent(newLocation);
-
-    var dispose = () => {
-      var index = viewContainer.indexOf(hostViewRef);
-      if (index !== -1) {
-        viewContainer.remove(index);
-      }
-    };
-
-    // TODO: make-shift ComponentRef_, this is pretty much going to
-    // break in future versions of ng2, keep an eye on it
-    return {
-      location: newLocation,
-      instance: component,
-      dispose: dispose
-    };
-  }
-
-  /**
-   * @private
-   * TODO
-   */
-  getBindings(viewCtrl) {
-    // create bindings to this ViewController and its NavParams
-    return this.bindings.concat(Injector.resolve([
       bind(ViewController).toValue(viewCtrl),
       bind(NavParams).toValue(viewCtrl.params),
     ]));
+
+    return this._loader.loadNextToLocation(type, location, bindings);
   }
 
   /**

ionic/components/nav/nav.ts

@@ -192,25 +192,28 @@ export class Nav extends NavController {
     if (structure.tabs) {
       // the component being loaded is an <ion-tabs>
       // Tabs is essentially a pane, cuz it has its own navbar and content containers
-      let contentContainerRef = this._viewManager.getViewContainer(this.anchorElementRef());
+      this.loadNextToAnchor(componentType, this.anchorElementRef(), viewCtrl).then(componentRef => {
-      let viewComponentRef = this.createViewComponentRef(componentType, hostProtoViewRef, contentContainerRef, this.getBindings(viewCtrl));
+
-      viewComponentRef.instance._paneView = true;
+        componentRef.instance._paneView = true;
 
         viewCtrl.disposals.push(() => {
-        viewComponentRef.dispose();
+          componentRef.dispose();
         });
 
         viewCtrl.onReady().then(() => {
           done();
         });
 
+      });
+
     } else {
       // normal ion-view going into pane
       this.getPane(structure, viewCtrl, (pane) => {
         // add the content of the view into the pane's content area
-        let viewComponentRef = this.createViewComponentRef(componentType, hostProtoViewRef, pane.contentContainerRef, this.getBindings(viewCtrl));
+        this.loadNextToAnchor(componentType, pane.contentAnchorRef, viewCtrl).then(componentRef => {
+
           viewCtrl.disposals.push(() => {
-          viewComponentRef.dispose();
+            componentRef.dispose();
 
             // remove the pane if there are no view items left
             pane.totalViews--;
@@ -224,10 +227,10 @@ export class Nav extends NavController {
 
           // a new ComponentRef has been created
           // set the ComponentRef's instance to this ViewController
-        viewCtrl.setInstance(viewComponentRef.instance);
+          viewCtrl.setInstance(componentRef.instance);
 
           // remember the ElementRef to the content that was just created
-        viewCtrl.viewElementRef(viewComponentRef.location);
+          viewCtrl.viewElementRef(componentRef.location);
 
           // get the NavController's container for navbars, which is
           // the place this NavController will add each ViewController's navbar
@@ -252,6 +255,8 @@ export class Nav extends NavController {
 
           done();
         });
+
+      });
     }
   }
 
@@ -273,7 +278,7 @@ export class Nav extends NavController {
 
     } else {
       // create a new nav pane
-      this._loader.loadNextToLocation(Pane, this.anchorElementRef(), this.getBindings(viewCtrl)).then(componentRef => {
+      this._loader.loadNextToLocation(Pane, this.anchorElementRef(), this.bindings).then(componentRef => {
 
         // get the pane reference
         pane = this.newPane;
@@ -352,17 +357,6 @@ export class Nav extends NavController {
 
 }
 
-/**
- * @private
- * TODO
- * @param  {TODO} elementBinder TODO
- * @param  {TODO} id            TODO
- * @return {TODO}               TODO
- */
-function isComponent(elementBinder, id) {
-  return (elementBinder && elementBinder.componentDirective && elementBinder.componentDirective.metadata.id == id);
-}
-
 /**
  * @private
  */
@@ -393,9 +387,9 @@ class NavBarAnchor {
 class ContentAnchor {
   constructor(
     @Host() @Inject(forwardRef(() => Pane)) pane: Pane,
-    viewContainerRef: ViewContainerRef
+    elementRef: ElementRef
   ) {
-    pane.contentContainerRef = viewContainerRef;
+    pane.contentAnchorRef = elementRef;
   }
 }
 

ionic/components/tabs/tab.ts

@@ -153,17 +153,18 @@ export class Tab extends NavController {
 
   loadContainer(componentType, hostProtoViewRef, viewCtrl, done) {
 
-    let viewComponentRef = this.createViewComponentRef(componentType, hostProtoViewRef, this.contentContainerRef, this.getBindings(viewCtrl));
+    this.loadNextToAnchor(componentType, this.contentAnchorRef, viewCtrl).then(componentRef => {
+
       viewCtrl.disposals.push(() => {
-      viewComponentRef.dispose();
+        componentRef.dispose();
       });
 
       // a new ComponentRef has been created
       // set the ComponentRef's instance to this ViewController
-    viewCtrl.setInstance(viewComponentRef.instance);
+      viewCtrl.setInstance(componentRef.instance);
 
       // remember the ElementRef to the content that was just created
-    viewCtrl.viewElementRef(viewComponentRef.location);
+      viewCtrl.viewElementRef(componentRef.location);
 
       // get the NavController's container for navbars, which is
       // the place this NavController will add each ViewController's navbar
@@ -187,6 +188,9 @@ export class Tab extends NavController {
       }
 
       done();
+
+    });
+
   }
 
 }
@@ -194,10 +198,7 @@ export class Tab extends NavController {
 
 @Directive({selector: 'template[content-anchor]'})
 class TabContentAnchor {
-  constructor(
+  constructor(@Host() tab: Tab, elementRef: ElementRef) {
-    @Host() tab: Tab,
+    tab.contentAnchorRef = elementRef;
-    viewContainerRef: ViewContainerRef
-  ) {
-    tab.contentContainerRef = viewContainerRef;
   }
 }