fix(nav): ion-nav inside ion-content work properly

Author: manucorporat

src/components/content/content.ts

@@ -173,8 +173,8 @@ export class Content extends Ion {
     this._sbPadding = config.getBoolean('statusbarPadding', false);
 
     if (viewCtrl) {
-      viewCtrl._setContent(this);
-      viewCtrl._setContentRef(elementRef);
+      viewCtrl._setIONContent(this);
+      viewCtrl._setIONContentRef(elementRef);
     }
   }
 

src/components/nav/test/basic/app-module.ts

@@ -40,7 +40,7 @@ export class MyCmpTest {}
         <button ion-item [navPush]="'FirstPage'">Push w/ [navPush] and string view name</button>
         <button ion-item (click)="setPages()">setPages() (Go to PrimaryHeaderPage)</button>
         <button ion-item (click)="setRoot()">setRoot(PrimaryHeaderPage) (Go to PrimaryHeaderPage)</button>
-        <button ion-item (click)="navCtrl.pop()">Pop</button>
+        <button ion-item (click)="pop()">Pop</button>
         <ion-item>
           <ion-label>Toggle Can Leave</ion-label>
           <ion-toggle (click)="canLeave = !canLeave"></ion-toggle>
@@ -174,6 +174,10 @@ export class FirstPage {
     }, 250);
   }
 
+  pop() {
+    this.navCtrl.pop().catch(() => {});
+  }
+
   viewDismiss() {
     this.viewCtrl.dismiss();
   }

src/components/nav/test/child-navs/app-module.ts

@@ -27,12 +27,15 @@ export class E2EApp {
 })
 export class LandingPage {
 
-  constructor(public navCtrl: NavController) {
-  }
+  constructor(public navCtrl: NavController) {}
 
   goToPage() {
     this.navCtrl.push(FirstPage);
   }
+
+  ionViewDidLoad() {
+    this.goToPage();
+  }
 }
 
 @Component({

src/components/nav/test/child-navs/e2e.ts

@@ -421,8 +421,8 @@ export class Tabs extends Ion implements AfterViewInit {
       // to refresh the tabbar and content dimensions to be sure
       // they're lined up correctly
       if (alreadyLoaded && selectedPage) {
-        let content = <Content>selectedPage.getContent();
-        if (content && content instanceof Content) {
+        let content = <Content>selectedPage.getIONContent();
+        if (content) {
           content.resize();
         }
       }

src/components/tabs/tabs.ts

@@ -175,20 +175,17 @@ export class NavControllerBase extends Ion implements NavController {
     }
 
     ti.resolve = (hasCompleted: boolean, isAsync: boolean, enteringName: string, leavingName: string, direction: string) => {
-      this.setTransitioning(false);
-
       // transition has successfully resolved
       this._trnsId = null;
       resolve && resolve(hasCompleted, isAsync, enteringName, leavingName, direction);
       this._sbCheck();
 
       // let's see if there's another to kick off
+      this.setTransitioning(false);
       this._nextTrns();
     };
 
     ti.reject = (rejectReason: any, trns: Transition) => {
-      this.setTransitioning(false);
-
       // rut row raggy, something rejected this transition
       this._trnsId = null;
       this._queue.length = 0;
@@ -209,6 +206,7 @@ export class NavControllerBase extends Ion implements NavController {
 
       reject && reject(false, false, rejectReason);
 
+      this.setTransitioning(false);
       this._nextTrns();
     };
 
@@ -248,6 +246,8 @@ export class NavControllerBase extends Ion implements NavController {
     if (!ti) {
       return false;
     }
+    // set that this nav is actively transitioning
+    this.setTransitioning(true);
 
     // Get entering and leaving views
     const leavingView = this.getActive();
@@ -325,7 +325,6 @@ export class NavControllerBase extends Ion implements NavController {
 
   _postViewInit(enteringView: ViewController, leavingView: ViewController, ti: TransitionInstruction, resolve: TransitionResolveFn) {
     const opts = ti.opts || {};
-
     const insertViews = ti.insertViews;
     const removeStart = ti.removeStart;
 
@@ -822,8 +821,8 @@ export class NavControllerBase extends Ion implements NavController {
   swipeBackProgress(stepValue: number) {
     if (this._sbTrns && this._sbGesture) {
       // continue to disable the app while actively dragging
-      this._app.setEnabled(false, ACTIVE_TRANSITION_MAX_TIME);
-      this.setTransitioning(true, ACTIVE_TRANSITION_MAX_TIME);
+      this._app.setEnabled(false, ACTIVE_TRANSITION_DEFAULT);
+      this.setTransitioning(true);
 
       // set the transition animation's progress
       this._sbTrns.progressStep(stepValue);
@@ -890,7 +889,7 @@ export class NavControllerBase extends Ion implements NavController {
     return (this._trnsTm > Date.now());
   }
 
-  setTransitioning(isTransitioning: boolean, durationPadding: number = 2000) {
+  setTransitioning(isTransitioning: boolean, durationPadding: number = ACTIVE_TRANSITION_DEFAULT) {
     this._trnsTm = (isTransitioning ? (Date.now() + durationPadding + ACTIVE_TRANSITION_OFFSET) : 0);
   }
 
@@ -962,5 +961,5 @@ export class NavControllerBase extends Ion implements NavController {
 let ctrlIds = -1;
 
 const DISABLE_APP_MINIMUM_DURATION = 64;
-const ACTIVE_TRANSITION_MAX_TIME = 5000;
+const ACTIVE_TRANSITION_DEFAULT = 5000;
 const ACTIVE_TRANSITION_OFFSET = 2000;

src/navigation/nav-controller-base.ts

@@ -6,6 +6,7 @@ import { Navbar } from '../components/navbar/navbar';
 import { NavControllerBase } from './nav-controller-base';
 import { NavOptions, ViewState } from './nav-util';
 import { NavParams } from './nav-params';
+import { Content } from '../components/content/content';
 
 
 /**
@@ -28,6 +29,8 @@ import { NavParams } from './nav-params';
 export class ViewController {
   private _cntDir: any;
   private _cntRef: ElementRef;
+  private _ionCntDir: Content;
+  private _ionCntRef: ElementRef;
   private _hdrDir: Header;
   private _ftrDir: Footer;
   private _isHidden: boolean = false;
@@ -308,7 +311,7 @@ export class ViewController {
   /**
    * @returns {component} Returns the Page's Content component reference.
    */
-  getContent() {
+  getContent(): any {
     return this._cntDir;
   }
 
@@ -326,6 +329,36 @@ export class ViewController {
     return this._cntRef;
   }
 
+  /**
+   * @private
+   */
+  _setIONContent(content: Content) {
+    this._setContent(content);
+    this._ionCntDir = content;
+  }
+
+  /**
+   * @private
+   */
+  getIONContent(): Content {
+    return this._ionCntDir;
+  }
+
+  /**
+   * @private
+   */
+  _setIONContentRef(elementRef: ElementRef) {
+    this._setContentRef(elementRef);
+    this._ionCntRef = elementRef;
+  }
+
+  /**
+   * @private
+   */
+  getIONContentRef(): ElementRef {
+    return this._ionCntRef;
+  }
+
   /**
    * @private
    */

src/navigation/view-controller.ts

@@ -24,8 +24,8 @@ export class PageTransition extends Transition {
    * DOM READ
    */
   readDimensions() {
-    const content = <Content>this.enteringView.getContent();
-    if (content && content instanceof Content) {
+    const content = <Content>this.enteringView.getIONContent();
+    if (content) {
       content.readDimensions();
     }
   }
@@ -34,8 +34,8 @@ export class PageTransition extends Transition {
    * DOM WRITE
    */
   writeDimensions() {
-    const content = <Content>this.enteringView.getContent();
-    if (content && content instanceof Content) {
+    const content = <Content>this.enteringView.getIONContent();
+    if (content) {
       content.writeDimensions();
     }
   }