'Ionic 3 Lifecycle events happening out of order when navigating to different pages

When navigating from one page to another using nav.setRoot(page), why does the iOnViewWillLeave event handler of the current page capture the leaving event after the iOnViewDidLoad of the target page already executes?

I need to unsubscribe from an event when the view is left and then subscribe to that event again upon entering the target page however it is currently unsubscribing from the event AFTER entering the target page which results in my page not listening to the event.

Workflow

  1. User In Page A
  2. User Navigates to Page B

How can I capture the leaving event in step 3 before step 2 happens?

Result

1)Entering Page A.ts

2)Entering Page B.ts

3)Leaving Page A.ts

Page A.ts

ionViewDidLoad(){
    console.log("Entering Page A.ts")
}

ionViewWillLeave(){
    console.log("Leaving Page A.ts)
} 

Page B.ts

ionViewDidLoad(){
    console.log("Entering Page B.ts")
}
ionViewWillLeave(){
    console.log("Leaving Page B.ts)
} 


Solution 1:[1]

use these two lifecycle event instead of them

ionViewWillEnter(){
 console.log("starting page");
}
ionViewWillLeave(){
 console.log("Leaving page");
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tiwari