Ionic 4 Event to Trigger Navigation Back to page

Ionic Framework
1

In Ionic 3 we used the ionViewWillEnter lifecycle event to reload data when navigating back to a page.

ionViewDidLoad gets called only when the page component is loaded, but ionViewWillEnter is called whenever the page is navigated to; regardless of whether it’s a navPop or nav.push.

However, Ionic 4 uses Angular routing, which doesn’t seem to have a lifecycle hook for when a component is navigated back to. How can we detect when a page component is navigated back to?

2

Would this method work for you?

3

Thanks for sending this! Unfortunately this solution was not ideal because it triggered for each instance of the active page.

4

We created a solution using this StackOverflow post

We added a willEnter() function to our <appName>Page interface. Each page in the app implements the <appName>Page interface. In the app.component.ts we listen for activate events and call the activatedPage.willEnter() function.

AppPage Interface:

export interface ExampleAppPage {
    exampleAppWillEnter: () => void;
}

ion-router-outlet in app.component.html:

<ion-router-outlet main (activate)="!!$event.exampleAppWillEnter ? $event.exampleAppWillEnter() : undefined"></ion-router-outlet>

Ionic Page Implementation:

export class ExamplePage implements ExampleAppPage {

    exampleAppWillEnter() {
        // Gets called whenever navigated
    }

}