Page lifecycle


#1

Is there documentation about the lifecycle of Page, like onEnter and etc?

Thanks.


#2

Never mind. Found it. http://ionicframework.com/docs/v2/api/components/nav/NavController/


#3

Page is not found…


#4

Yes, not found… where have they moved it?

Another possibility is to check out the code: https://github.com/driftyco/ionic/blob/d5f71a448dd8724a97e589a94d974d84248c477f/src/navigation/test/view-controller.spec.ts


#5

You may Found over here

http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events


#6

Hi, do you know if those things about route guards are implemented in RC.0 NavController?

@brandyshea of @jgw9617 what’s the current stand of ionic on this matter?


#7

Yes they should be working in RC.0. Check out the nightly docs for NavController: http://ionicframework.com/docs/v2/nightly/api/navigation/NavController/#lifecycle-events

ionViewCanEnter
ionViewCanLeave

We’ll add some more docs on this, but you just need to return true or false in these events based on whether you want them to enter/leave or not:

ionViewCanLeave() {
  console.log("Should I leave? No");
  return false;
}

then you need to catch any errors in the nav push:

startApp() {
  this.navCtrl.push(TabsPage).catch(() => {
    console.log("transition was cancelled");
  });
}

#8

Yep, i’ve tested those, trying to make redirection work inside of it, which looks kind of like a hack having to wrap the redirection with a setTimeout function:

  ionViewCanEnter() {
    console.log('Can enter.');
    // setTimeout(() => {
    //   this.navCtrl.setRoot(Page2)
    // }, 0);
    return false;
  }

It’s interesting to know that it also works with rejected promises which opens the possibility to async guards:

  ionViewCanEnter() {
    console.log('Can enter.');
    setTimeout(() => {
      this.navCtrl.setRoot(Page2)
    }, 0);
    return Promise.reject(true);
  }

@brandyshea btw a little question, which comes first in the lifecycle process, the constructor or that ionViewCanEnter hook?

Also is there a way to set a global Guard or may i have to export a callback to pass to that hook?


#10

By definition, nothing can occur before the constructor.


#11

Thanks, though this was so long ago that i don’t even remember this thread.


#12

Apparently, on entering into the page view the sequence is:
1)ionViewCanEnter
2)ionViewDidLoad
3)ionViewWillEnter
4)ionViewDidEnter

On exit from page view the sequence is:
1)ionViewWillLeave
2)ionViewDidLeave


#13

In reality, that isn’t always the case, right? Because if truly nothing can occur before the constructor, how does the component page render before a guard implemented in the constructor is engaged?


#14

Yes, it is. The constructor is called at object instantiation time, so if the object exists, its constructor has been called.

I don’t see where you’re getting “implemented in the constructor” from. The guard is implemented in ionViewCanEnter(), which (apparently to your chagrin) is clearly not called before the constructor. All lifecycle events happen after the constructor is called.


#15

page found. redirect to true page

ionViewDidLoad void Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.
ionViewWillEnter void Runs when the page is about to enter and become the active page.
ionViewDidEnter void Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.
ionViewWillLeave void Runs when the page is about to leave and no longer be the active page.
ionViewDidLeave void Runs when the page has finished leaving and is no longer the active page.
ionViewWillUnload void Runs when the page is about to be destroyed and have its elements removed.
ionViewCanEnter boolean/Promise Runs before the view can enter. This can be used as a sort of “guard” in authenticated views where you need to check permissions before the view can enter
ionViewCanLeave boolean/Promise Runs before the view can leave. This can be used as a sort of “guard” in authenticated views where you need to check permissions before the view can leave