fix(nav): ionViewDidLoad is called after ngAfterViewInit

fixes ionic-team#8449 fixes ionic-team#8414
manucorporat · Oct 10, 2016 · a6edfba · a6edfba
1 parent 8c3433f
commit a6edfba
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 17 deletions.
diff --git a/src/components/loading/loading-component.ts b/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;

diff --git a/src/components/modal/test/basic/app-module.ts b/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 || 0}})</p>
+      <p>ionViewWillEnter ({{called.ionViewWillEnter || 0}})</p>
+      <p>ionViewDidEnter ({{called.ionViewDidEnter || 0}})</p>
+      <p>ionViewWillLeave ({{called.ionViewWillLeave || 0}})</p>
+      <p>ionViewDidLeave ({{called.ionViewDidLeave || 0}})</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 || 0}})</p>
+      <p>ionViewWillEnter ({{called.ionViewWillEnter || 0}})</p>
+      <p>ionViewDidEnter ({{called.ionViewDidEnter || 0}})</p>
+      <p>ionViewWillLeave ({{called.ionViewWillLeave || 0}})</p>
+      <p>ionViewDidLeave ({{called.ionViewDidLeave || 0}})</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() {

diff --git a/src/navigation/nav-controller-base.ts b/src/navigation/nav-controller-base.ts
@@ -570,16 +570,9 @@ 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);
-
     // 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;
@@ -590,6 +583,14 @@ export class NavControllerBase extends Ion implements NavController {
     }
 
     componentRef.changeDetectorRef.detectChanges();
+
+    // successfully finished loading the entering view
+    // fire off the "loaded" lifecycle events
+    view._didLoad();
+    this.viewDidLoad.emit(view);
+    this._app.viewDidLoad.emit(view);
+
+    view._state = ViewState.PRE_RENDERED;
   }
 
   _trnsStart(trns: Transition, enteringView: ViewController, leavingView: ViewController, opts: NavOptions, resolve: TransitionResolveFn) {