Nested routing ion-tabs page not firing onInit and onDestroy

i have already build UI with 3 ion-tabs page and inside every page, there is sub page that i have been created using shared component to split and make developer easily to read the code. see below image to see the detail

inside the sub page, there is an auto update that triggered using onInit and onDestroy. it works when changing the segment inside the ion-tabs page, but it will break when user change the ion-tabs page because onDestroy is not triggered. and i find this official ionic 5 doc said

Ionic has its router outlet, called <ion-router-outlet /> . This outlet extends Angular’s <router-outlet /> with some additional functionality to enable better experiences for mobile devices.

When an app is wrapped in <ion-router-outlet /> , Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:

1. We can maintain the state of the old page (data on the screen, scroll position, etc…)
2. We can provide a smoother transition back to the page since it is already there and doesn’t need to be recreated.

Pages are only removed from the DOM when they are “popped”, for instance, by pressing the back button in the UI or the browsers back button.

Because of this special handling, the ngOnInit and ngOnDestroy methods might not fire when you would usually think they should.

ngOnInit will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page’s ngOnInit method once, but not on subsequent visits. ngOnDestroy will only fire when a page “popped”.

the question is anyone can help me how to force destroying page after ion-tabs changing? or do u guys have concept that i should try? please need the answer ASAP because i can’t fix the bug

1 post - 1 participant

Read full topic