ionViewWillEnter doesn't get Triggered -Ionic 5-Tabs - ionic5

Question

I have 3 tabs in my app from which I want to redirect to another page.i.e when the user clicks on the tabs it will load a list from that I want to redirect to a page (say X).After clicking the back button of X page ionViewWillEnter/DidEnter doesnot work. Can any one help me to findout the solution ?
App Module Routing page :- Which loads a seprate module called UW.
const routes: Routes = [
{
path: 'uw',
loadChildren: () => import('src/app/UW/uw.module').then(m => m.UwModule)
},
]
UW module Loads a dashboard page :
const routes: Routes = [
{
path: 'dashboard-uw',
loadChildren: () => import('src/app/UW/pages/dashboard-uw/dashboard-uw.module').then(m => m.DashboardUwPageModule)
},
{
path: '',
redirectTo: 'dashboard-uw',
pathMatch: 'full'
},
]
The dashboard page contain Tabs which loads seprate pages on each Tab click
Dashboard routing Module :
const routes: Routes = [
{
path: '',
component: DashboardUwPage,
children: [
{
path: uwconstants.UW_TAB1,
loadChildren: () => import('src/app/UW/pages/uw-premium/uw-premium.module').then(m => m.UwPremiumPageModule)
},
{
path: uwconstants.UW_TAB2,
loadChildren: () => import('src/app/UW/pages/uw-invoices/uw-invoices.module').then(m => m.UwInvoicesPageModule)
},
{
path: uwconstants.UW_TAB3,
loadChildren: () => import('src/app/UW/pages/uw-tat/uw-tat.module').then(m => m.UwTatPageModule)
},
{
path: uwconstants.UW_TAB4,
loadChildren: () => import('src/app/UW/pages/uw-intermediary/uw-intermediary.module').then(m => m.UwIntermediaryPageModule)
},
{
path: uwconstants.UW_TAB5,
loadChildren: () => import('src/app/UW/pages/uw-vet-pvet-add-tab/uw-vet-pvet-add-tab.module').then(m => m.UwVetPvetAddTabPageModule)
},
{
path: '',
redirectTo: uwconstants.UW_TAB1,
pathMatch: 'full'
},
]
},
{
path: '',
redirectTo: 'uw/dashboard-uw/UW-TAB1',
pathMatch: 'full'
},
];
Each tab click loads a seprate page,using this line of code
public approvePremium(item) {
this.navctrl.navigateForward([ '/uw/uw-premium-send', { leadCode: item } ])
}
for back button click, I am using
this.navctrl.navigateBack([ 'uw', 'dashboard-uw', 'UW-TAB1' ]);
ionViewWill Enter Not triggered after the back button click.Some one help me to findout the solution.Thanks in advance

Answer 1

Change the tabs routing module by the following
TabsPageRoutingModule
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [ {
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule),
},
{
path: 'dummy',
loadChildren: () => import('../sample/sample.module').then(m => m.SamplePageModule)
} ]
},
{
path: 'tab2',
loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
},
{
path: 'tab3',
loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
Here we have three tabs tab1,tab2,tab3 and dummy is the child page of tab1
tabsPage.html
<ion-tabs>
<ion-tab-bar slot="bottom" **id="myTabs"**>
----
----
</ion-tab-bar>
</ion-tabs>
From your first tab you can navigate to child page navigate method. Since hiding tabs on inner pages is a known issue there is no straight forward method to hide it. So use the following custom method. Create a service class and add it as a common method
ServiceClass
public toggleTabsBar(){
const tabId = document.getElementById('myTabs');
if (tabId) {
if (tabId.style.display === 'none') {
tabId.style.display = 'flex';
}else{
tabId.style.display = 'none'
}
}
}
In your child page here dummy page hide the tabs bar by invoking the toggleTabsBar() on IonViewDidEnter() method
DummyPage
ionViewDidEnter(): void {
this.toggleTabsBar();
}
When you click the backbutton from the child page to navigate back to the parent page to show the tabs invoke the same method on the IonViewDidEnter() method.