3

In ionic 3 there was lifecycle events like ionViewWillEnter and ionViewWillLeave. But in Ionic 4 this event must be replaced by Angular lifecycle events like ngOnInit and ngOnDestroy.

In my application I need to realize some given operations when the user enter or leaves a page. For example, if the user push another page (navigate forward in Ionic 4), the app whould execute ionViewWillLeave for the current page before the new page being pushed. If the user came back from a pushed page (navigate backward in Ionic 4) the app whould execute ionViewWillEnter for the previous page.

I tried to replace this events with ngOnInit and ngOnDestroy. But this events are called just one time each per page. For example, if I route to another page (navigate root in Ionic 4) and came back to the first page, the first page the ngOnInit and ngOnDestroy events will not be called again.

How can I call a event each time a user enter or leaves a page?

Natanael
  • 1,326
  • 5
  • 17
  • 34

3 Answers3

3

I made a mistake. The documentation says:

With V4, we're now able to utilize the typical events provided by Angular. But for certain cases, you might want to have access to the events fired when a component has finished animating during it's route change. In this case, the ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, and ionViewDidLeave have been ported over from V3. Use these events to coordinate actions with Ionic's own animations system.

Older events like ionViewDidLoad, ionViewCanLeave, and ionViewCanEnter have been removed, and the proper Angular alternatives should be used. Migration Guide - Lifecycle Events

Natanael
  • 1,326
  • 5
  • 17
  • 34
0

**

Lifecycles in Ionic 4

**

Ionic 4 extends the Router Navigation of Angular
Ionic 4 introduces a stack functionality (like in Ionic 3)
Ionic 4 adds new Lifecycle Hooks to Angular:
ionViewWillEnter — Fired when entering a page (also if it’s come back from stack)
ionViewDidEnter — Fired after entering (also if it’s come back from stack)
ionViewWillLeave — Fired if the page will leaved (also if it’s keep in stack)
ionViewDidLeave — Fired after the page was leaved (also if it’s keep in stack)
ionViewWillUnload — In Angular not firing because here you have to use ngOnDestroy
Except ionViewDidLoad (because it’s the same like ngOnInit) and the two nav guards all Lifecycle hooks from Ionic 3 are still available
ngOnInit will not be triggered, if you come back to a page after putting it into a stack By default, if you navigate forward, the current page keeps in stack, so NO ngOnDestroy will be triggered. Only if you set the new page as root (navController.navigateRoot())) or you navigate backwards, it will be removed from stack
If you want to cancel Observables, just do it ionViewWillLeave or ionViewDidLeave and subscribe to it again in ionViewWillEnter or ionViewDidEnter
Take a look at the DOM inspector, there you can see that your page is still in the stack If you use the Angular Router, pages will add to the stack. I recommend to use the Ionic Angular NavController because here you can use the new stack functionality

Supriya
  • 481
  • 5
  • 5
0

I feel this is the problem you need, you can refer to my solution.(ionic 6 , angular 13).

Ionic Globally Call IonViewWillEnter on App.component.ts

phiphophe
  • 1
  • 4