diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 8e23c4c7b9..37ac0f45d1 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -527,41 +527,13 @@ export class NavController extends Ion { * @private * TODO */ - createViewComponentRef(type, hostProtoViewRef, viewContainer, viewCtrlBindings) { - let bindings = this.bindings.concat(viewCtrlBindings); - - // 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([ + loadNextToAnchor(type, location, viewCtrl) { + let bindings = this.bindings.concat(Injector.resolve([ bind(ViewController).toValue(viewCtrl), bind(NavParams).toValue(viewCtrl.params), ])); + + return this._loader.loadNextToLocation(type, location, bindings); } /** diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index a98a4ef1f8..063eeb9ff6 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -192,65 +192,70 @@ export class Nav extends NavController { if (structure.tabs) { // the component being loaded is an // Tabs is essentially a pane, cuz it has its own navbar and content containers - let contentContainerRef = this._viewManager.getViewContainer(this.anchorElementRef()); - let viewComponentRef = this.createViewComponentRef(componentType, hostProtoViewRef, contentContainerRef, this.getBindings(viewCtrl)); - viewComponentRef.instance._paneView = true; + this.loadNextToAnchor(componentType, this.anchorElementRef(), viewCtrl).then(componentRef => { - viewCtrl.disposals.push(() => { - viewComponentRef.dispose(); - }); + componentRef.instance._paneView = true; + + viewCtrl.disposals.push(() => { + componentRef.dispose(); + }); + + viewCtrl.onReady().then(() => { + done(); + }); - 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)); - viewCtrl.disposals.push(() => { - viewComponentRef.dispose(); - - // remove the pane if there are no view items left - pane.totalViews--; - if (pane.totalViews === 0) { - pane.dispose && pane.dispose(); - } - }); - - // count how many ViewControllers are in this pane - pane.totalViews++; - - // a new ComponentRef has been created - // set the ComponentRef's instance to this ViewController - viewCtrl.setInstance(viewComponentRef.instance); - - // remember the ElementRef to the content that was just created - viewCtrl.viewElementRef(viewComponentRef.location); - - // get the NavController's container for navbars, which is - // the place this NavController will add each ViewController's navbar - let navbarContainerRef = pane.navbarContainerRef; - - // get this ViewController's navbar TemplateRef, which may not - // exist if the ViewController's template didn't have an - let navbarTemplateRef = viewCtrl.getNavbarTemplateRef(); - - // create the navbar view if the pane has a navbar container, and the - // ViewController's instance has a navbar TemplateRef to go to inside of it - if (navbarContainerRef && navbarTemplateRef) { - let navbarView = navbarContainerRef.createEmbeddedView(navbarTemplateRef, -1); + this.loadNextToAnchor(componentType, pane.contentAnchorRef, viewCtrl).then(componentRef => { viewCtrl.disposals.push(() => { - let index = navbarContainerRef.indexOf(navbarView); - if (index > -1) { - navbarContainerRef.remove(index); + componentRef.dispose(); + + // remove the pane if there are no view items left + pane.totalViews--; + if (pane.totalViews === 0) { + pane.dispose && pane.dispose(); } }); - } - done(); + // count how many ViewControllers are in this pane + pane.totalViews++; + + // a new ComponentRef has been created + // set the ComponentRef's instance to this ViewController + viewCtrl.setInstance(componentRef.instance); + + // remember the ElementRef to the content that was just created + viewCtrl.viewElementRef(componentRef.location); + + // get the NavController's container for navbars, which is + // the place this NavController will add each ViewController's navbar + let navbarContainerRef = pane.navbarContainerRef; + + // get this ViewController's navbar TemplateRef, which may not + // exist if the ViewController's template didn't have an + let navbarTemplateRef = viewCtrl.getNavbarTemplateRef(); + + // create the navbar view if the pane has a navbar container, and the + // ViewController's instance has a navbar TemplateRef to go to inside of it + if (navbarContainerRef && navbarTemplateRef) { + let navbarView = navbarContainerRef.createEmbeddedView(navbarTemplateRef, -1); + + viewCtrl.disposals.push(() => { + let index = navbarContainerRef.indexOf(navbarView); + if (index > -1) { + navbarContainerRef.remove(index); + } + }); + } + + 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; } } diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index aa21cadd6b..af5d190202 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -153,40 +153,44 @@ export class Tab extends NavController { loadContainer(componentType, hostProtoViewRef, viewCtrl, done) { - let viewComponentRef = this.createViewComponentRef(componentType, hostProtoViewRef, this.contentContainerRef, this.getBindings(viewCtrl)); - viewCtrl.disposals.push(() => { - viewComponentRef.dispose(); - }); - - // a new ComponentRef has been created - // set the ComponentRef's instance to this ViewController - viewCtrl.setInstance(viewComponentRef.instance); - - // remember the ElementRef to the content that was just created - viewCtrl.viewElementRef(viewComponentRef.location); - - // get the NavController's container for navbars, which is - // the place this NavController will add each ViewController's navbar - let navbarContainerRef = this.tabs.navbarContainerRef; - - // get this ViewController's navbar TemplateRef, which may not - // exist if the ViewController's template didn't have an - let navbarTemplateRef = viewCtrl.getNavbarTemplateRef(); - - // create the navbar view if the pane has a navbar container, and the - // ViewController's instance has a navbar TemplateRef to go to inside of it - if (navbarContainerRef && navbarTemplateRef) { - let navbarView = navbarContainerRef.createEmbeddedView(navbarTemplateRef, -1); + this.loadNextToAnchor(componentType, this.contentAnchorRef, viewCtrl).then(componentRef => { viewCtrl.disposals.push(() => { - let index = navbarContainerRef.indexOf(navbarView); - if (index > -1) { - navbarContainerRef.remove(index); - } + componentRef.dispose(); }); - } - done(); + // a new ComponentRef has been created + // set the ComponentRef's instance to this ViewController + viewCtrl.setInstance(componentRef.instance); + + // remember the ElementRef to the content that was just created + viewCtrl.viewElementRef(componentRef.location); + + // get the NavController's container for navbars, which is + // the place this NavController will add each ViewController's navbar + let navbarContainerRef = this.tabs.navbarContainerRef; + + // get this ViewController's navbar TemplateRef, which may not + // exist if the ViewController's template didn't have an + let navbarTemplateRef = viewCtrl.getNavbarTemplateRef(); + + // create the navbar view if the pane has a navbar container, and the + // ViewController's instance has a navbar TemplateRef to go to inside of it + if (navbarContainerRef && navbarTemplateRef) { + let navbarView = navbarContainerRef.createEmbeddedView(navbarTemplateRef, -1); + + viewCtrl.disposals.push(() => { + let index = navbarContainerRef.indexOf(navbarView); + if (index > -1) { + navbarContainerRef.remove(index); + } + }); + } + + done(); + + }); + } } @@ -194,10 +198,7 @@ export class Tab extends NavController { @Directive({selector: 'template[content-anchor]'}) class TabContentAnchor { - constructor( - @Host() tab: Tab, - viewContainerRef: ViewContainerRef - ) { - tab.contentContainerRef = viewContainerRef; + constructor(@Host() tab: Tab, elementRef: ElementRef) { + tab.contentAnchorRef = elementRef; } }