fix(nav): ionViewDidLoad is called in modals

fixes #8449

Author: manucorporat

src/components/loading/loading-component.ts

@@ -4,7 +4,7 @@ import { Config } from '../../config/config';
 import { isDefined, isUndefined } from '../../util/util';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
-
+import { LoadingOptions } from './loading-options';
 
 /**
 * @private
@@ -25,15 +25,7 @@ import { ViewController } from '../../navigation/view-controller';
   encapsulation: ViewEncapsulation.None,
 })
 export class LoadingCmp {
-  d: {
-    spinner?: string;
-    content?: string;
-    cssClass?: string;
-    showBackdrop?: boolean;
-    dismissOnPageChange?: boolean;
-    delay?: number;
-    duration?: number;
-  };
+  d: LoadingOptions;
   id: number;
   showSpinner: boolean;
   durationTimeout: number;

src/components/modal/modal-component.ts

@@ -30,7 +30,7 @@ export class ModalCmp {
     this._bdDismiss = _navParams.data.opts.enableBackdropDismiss;
   }
 
-  ngAfterViewInit() {
+  ionViewWillLoad() {
     this._load(this._navParams.data.component);
   }
 

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

@@ -130,12 +130,18 @@ export class E2EPage {
         </ion-item>
       </ion-list>
       <button ion-button full (click)="submit()">Submit</button>
+      <p>ionViewDidLoad ({{called.ionViewDidLoad}})</p>
+      <p>ionViewWillEnter ({{called.ionViewWillEnter}})</p>
+      <p>ionViewDidEnter ({{called.ionViewDidEnter}})</p>
+      <p>ionViewWillLeave ({{called.ionViewWillLeave}})</p>
+      <p>ionViewDidLeave ({{called.ionViewDidLeave}})</p>
     </ion-content>
   `,
   providers: [SomeComponentProvider]
 })
 export class ModalPassData {
   data: any;
+  called: any;
 
   constructor(
     public viewCtrl: ViewController,
@@ -148,6 +154,14 @@ export class ModalPassData {
       name: someComponentProvider.getName()
     };
     console.log('SomeAppProvider Data', someAppProvider.getData());
+
+    this.called = {
+      ionViewDidLoad: 0,
+      ionViewWillEnter: 0,
+      ionViewDidEnter: 0,
+      ionViewWillLeave: 0,
+      ionViewDidLeave: 0
+    };
   }
 
   submit() {
@@ -157,10 +171,12 @@ export class ModalPassData {
 
   ionViewDidLoad() {
     console.log('ModalPassData ionViewDidLoad fired');
+    this.called.ionViewDidLoad++;
   }
 
   ionViewWillEnter() {
     console.log('ModalPassData ionViewWillEnter fired');
+    this.called.ionViewWillEnter++;
   }
 
   ionViewDidEnter() {
@@ -169,14 +185,17 @@ export class ModalPassData {
       message: 'test toast',
       duration: 1000
     }).present();
+    this.called.ionViewDidEnter++;
   }
 
   ionViewWillLeave() {
     console.log('ModalPassData ionViewWillLeave fired');
+    this.called.ionViewWillLeave++;
   }
 
   ionViewDidLeave() {
     console.log('ModalPassData ionViewDidLeave fired');
+    this.called.ionViewDidLeave++;
   }
 }
 
@@ -341,6 +360,11 @@ export class ContactUs {
       <p>
         <button ion-button (click)="openActionSheet()">Open Action Sheet</button>
       </p>
+      <p>ionViewDidLoad ({{called.ionViewDidLoad}})</p>
+      <p>ionViewWillEnter ({{called.ionViewWillEnter}})</p>
+      <p>ionViewDidEnter ({{called.ionViewDidEnter}})</p>
+      <p>ionViewWillLeave ({{called.ionViewWillLeave}})</p>
+      <p>ionViewDidLeave ({{called.ionViewDidLeave}})</p>
       <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
       <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
       <ion-list>
@@ -353,6 +377,7 @@ export class ContactUs {
 })
 export class ModalFirstPage {
   items: any[] = [];
+  called: any;
 
   constructor(
     public navCtrl: NavController,
@@ -364,6 +389,14 @@ export class ModalFirstPage {
         value: (i + 1)
       });
     }
+
+    this.called = {
+      ionViewDidLoad: 0,
+      ionViewWillEnter: 0,
+      ionViewDidEnter: 0,
+      ionViewWillLeave: 0,
+      ionViewDidLeave: 0
+    };
   }
 
   push() {
@@ -379,10 +412,12 @@ export class ModalFirstPage {
 
   ionViewDidLoad() {
     console.log('ModalFirstPage ionViewDidLoad fired');
+    this.called.ionViewDidLoad++;
   }
 
   ionViewWillEnter() {
     console.log('ModalFirstPage ionViewWillEnter fired');
+    this.called.ionViewWillEnter++;
   }
 
   ionViewDidEnter() {
@@ -397,6 +432,15 @@ export class ModalFirstPage {
       ]
     });
     alert.present();
+    this.called.ionViewDidEnter++;
+  }
+
+  ionViewWillLeave() {
+    this.called.ionViewWillLeave++;
+  }
+
+  ionViewDidLeave() {
+    this.called.ionViewDidLeave++;
   }
 
   openActionSheet() {

src/components/popover/popover-component.ts

@@ -60,7 +60,7 @@ export class PopoverCmp {
     this.id = (++popoverIds);
   }
 
-  ngAfterViewInit() {
+  ionViewWillLoad() {
     let activeElement: any = document.activeElement;
     if (document.activeElement) {
       activeElement.blur();

src/navigation/nav-controller-base.ts

@@ -187,17 +187,20 @@ 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;
@@ -218,7 +221,6 @@ export class NavControllerBase extends Ion implements NavController {
 
       reject && reject(false, false, rejectReason);
 
-      this.setTransitioning(false);
       this._nextTrns();
     };
 
@@ -390,17 +392,9 @@ export class NavControllerBase extends Ion implements NavController {
       // batch all of lifecycles together
       var view = destroyQueue[i];
       if (view && view !== enteringView && view !== leavingView) {
-        view._willLeave();
-        this.viewWillLeave.emit(view);
-        this._app.viewWillLeave.emit(view);
-
-        view._didLeave();
-        this.viewDidLeave.emit(view);
-        this._app.viewDidLeave.emit(view);
-
-        view._willUnload();
-        this.viewWillUnload.emit(view);
-        this._app.viewWillUnload.emit(view);
+        this._willLeave(view);
+        this._didLeave(view);
+        this._willUnload(view);
       }
     }
     for (var i = 0; i < destroyQueue.length; i++) {
@@ -571,20 +565,19 @@ export class NavControllerBase extends Ion implements NavController {
 
   _viewInsert(view: ViewController, componentRef: ComponentRef<any>, viewport: ViewContainerRef) {
     // successfully finished loading the entering view
-    // fire off the "loaded" lifecycle events
-    view._didLoad();
-    this.viewDidLoad.emit(view);
-    this._app.viewDidLoad.emit(view);
+    // fire off the "didLoad" lifecycle events
+    this._willLoad(view);
+    this._didLoad(view);
 
     // render the component ref instance to the DOM
     // ******** DOM WRITE ****************
     viewport.insert(componentRef.hostView, viewport.length);
     view._state = ViewState.PRE_RENDERED;
 
-    // the ElementRef of the actual ion-page created
-    const pageElement = componentRef.location.nativeElement;
-
     if (view._cssClass) {
+      // the ElementRef of the actual ion-page created
+      var pageElement = componentRef.location.nativeElement;
+
       // ******** DOM WRITE ****************
       this._renderer.setElementClass(pageElement, view._cssClass, true);
     }
@@ -666,17 +659,8 @@ export class NavControllerBase extends Ion implements NavController {
 
   _viewsWillLifecycles(enteringView: ViewController, leavingView: ViewController) {
     // call each view's lifecycle events
-    if (enteringView) {
-      enteringView._willEnter();
-      this.viewWillEnter.emit(enteringView);
-      this._app.viewWillEnter.emit(enteringView);
-    }
-
-    if (leavingView) {
-      leavingView._willLeave();
-      this.viewWillLeave.emit(leavingView);
-      this._app.viewWillLeave.emit(leavingView);
-    }
+    enteringView && this._willEnter(enteringView);
+    leavingView && this._willLeave(leavingView);
   }
 
   _trnsFinish(trns: Transition, opts: NavOptions, resolve: TransitionResolveFn) {
@@ -690,16 +674,12 @@ export class NavControllerBase extends Ion implements NavController {
       // transition has completed (went from 0 to 1)
       if (trns.enteringView) {
         enteringName = trns.enteringView.name;
-        trns.enteringView._didEnter();
-        this.viewDidEnter.emit(trns.enteringView);
-        this._app.viewDidEnter.emit(trns.enteringView);
+        this._didEnter(trns.enteringView);
       }
 
       if (trns.leavingView) {
         leavingName = trns.leavingView.name;
-        trns.leavingView._didLeave();
-        this.viewDidLeave.emit(trns.leavingView);
-        this._app.viewDidLeave.emit(trns.leavingView);
+        this._didLeave(trns.leavingView);
       }
 
       this._cleanup(trns.enteringView);
@@ -744,9 +724,7 @@ export class NavControllerBase extends Ion implements NavController {
       if (i > activeViewIndex) {
         // this view comes after the active view
         // let's unload it
-        view._willUnload();
-        this.viewWillUnload.emit(view);
-        this._app.viewWillUnload.emit(view);
+        this._willUnload(view);
         view._destroy(this._renderer);
 
       } else if (i < activeViewIndex && !this._isPortal) {
@@ -769,6 +747,47 @@ export class NavControllerBase extends Ion implements NavController {
     }
   }
 
+  _willLoad(view: ViewController) {
+    view._willLoad();
+  }
+
+  _didLoad(view: ViewController) {
+    view._didLoad();
+    this.viewDidLoad.emit(view);
+    this._app.viewDidLoad.emit(view);
+  }
+
+  _willEnter(view: ViewController) {
+    view._willEnter();
+    this.viewWillEnter.emit(view);
+    this._app.viewWillEnter.emit(view);
+  }
+
+  _didEnter(view: ViewController) {
+    view._didEnter();
+    this.viewDidEnter.emit(view);
+    this._app.viewDidEnter.emit(view);
+  }
+
+  _willLeave(view: ViewController) {
+    view._willLeave();
+    this.viewWillLeave.emit(view);
+    this._app.viewWillLeave.emit(view);
+  }
+
+  _didLeave(view: ViewController) {
+    view._didLeave();
+    this.viewDidLeave.emit(view);
+    this._app.viewDidLeave.emit(view);
+  }
+
+  _willUnload(view: ViewController) {
+    view._willUnload();
+    this.viewWillUnload.emit(view);
+    this._app.viewWillUnload.emit(view);
+  }
+
+
   getActiveChildNav(): any {
     return this._children[this._children.length - 1];
   }
@@ -980,4 +999,4 @@ let ctrlIds = -1;
 
 const DISABLE_APP_MINIMUM_DURATION = 64;
 const ACTIVE_TRANSITION_MAX_TIME = 5000;
-const ACTIVE_TRANSITION_OFFSET = 400;
+const ACTIVE_TRANSITION_OFFSET = 2000;

src/navigation/view-controller.ts

@@ -408,6 +408,13 @@ export class ViewController {
     }
   }
 
+  /**
+   * @private
+   */
+  _willLoad() {
+    ctrlFn(this, 'WillLoad');
+  }
+
   /**
    * @private
    * The view has loaded. This event only happens once per view being