How to clear the nested child routes when moving from one tab to another tab in Ionic 4

I am working in my Ionic 4 application and I have child routes for the particular tabs.

I am trying that when the user moves from the child route of tab1 to the tab2 and when the user comes to the tab1, it should open the tab1 page not the child route of tab1.

This is tabs.router.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          },
          {
            path: 'eventdetails',
            loadChildren: '../eventdetails/eventdetails.module#EventdetailsPageModule'
          },
          {
            path: 'progresspage',
            loadChildren: '../myprogress/myprogress.module#MyprogressPageModule'
          }
        ]
      },
     ]
    },
    {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
   }
  ];      

When I move from the child route of any tab to the other tab, and when I move to that tab, it will open the child route from where I move to the other tab.

I want that when the user moves from the child route of any tab to the other tab and when it comes back to that tab, it should open that tab not the child one.

Like when the user moves from the tab1>progresspage to tab2 and when it clicks on the tab1, it should open the tab1 page not the progresspage page.

Any help is much appreciated.

To achieve the desired behavior in your Ionic 4 application, you need to modify the navigation logic so that when a user navigates back to a tab, it always navigates to the root of that tab, not the child route. You can achieve this by using the NavController to programmatically navigate to the root of the tab when it is selected.

Here’s how you can accomplish this:

Modify the tabs.router.module.ts to ensure the routes are correctly set up. Override the tab click behavior to reset the navigation stack for each tab.

Step 1: Ensure Correct Route Configuration

Your tabs.router.module.ts file looks fine, but let's ensure it is correctly set up:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          },
          {
            path: 'eventdetails',
            loadChildren: () => import('../eventdetails/eventdetails.module').then(m => m.EventdetailsPageModule)
          },
          {
            path: 'progresspage',
            loadChildren: () => import('../myprogress/myprogress.module').then(m => m.MyprogressPageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

Step 2: Override Tab Click Behavior

You need to override the default tab click behavior to navigate to the root of the tab. You can achieve this by modifying the TabsPage component.

1. Modify tabs.page.html to handle tab change events:

   <ion-tabs (ionTabsDidChange)="onTabChange($event)">
    <ion-tab-bar slot="bottom">
   <ion-tab-button tab="tab1">
     <ion-icon name="triangle"></ion-icon>
     <ion-label>Tab 1</ion-label>
   </ion-tab-button>
   
   <ion-tab-button tab="tab2">
     <ion-icon name="ellipse"></ion-icon>
     <ion-label>Tab 2</ion-label>
   </ion-tab-button>
   

2. Implement the onTabChange method in tabs.page.ts to navigate to the root of the tab:

    import { Component } from '@angular/core';
    import { NavController } from '@ionic/angular';
   
    @Component({
     selector: 'app-tabs',
     templateUrl: 'tabs.page.html',
     styleUrls: ['tabs.page.scss']
    })
    export class TabsPage {
   
    constructor(private navCtrl: NavController) {}
   
     onTabChange(event: any) {
     const selectedTab = event.tab;
     // Navigate to the root of the selected tab
     this.navCtrl.navigateRoot(`/tabs/${selectedTab}`);
    }
   }