ionViewWillEnter doesn't get Triggered -Ionic 5-Tabs

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

Solution

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.