Ion Tabs - Load a page from a child preserving the parent's content

Issue

I'm facing a routing issue within an Angular application that uses Ion Tabs. My app has a "home" tab within the Ion Tabs and I want to allow navigation to a different page when a user clicks on one of the items within the "home" tab.

My routing structure is as follows:

In my "home" page, I have a list of cards and I want that when a user clicks on a card, they are redirected to a "user-trainer-view" page with a specific ID.

The "home" tab is inside Ion Tabs, but when I navigate from home to "user-trainer-view", the Ion Tabs bar disappears from view.

Here's how I'm handling navigation within my "home"

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/user-trainer-view', id]);
}

Here are my route definitions:

In the Ion Tabs module (tabs.module.ts):

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../trainers/home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'trainer-user-view/:id',
        loadChildren: () => import('../trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
      }
    ],

  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule { }

What is the problem with my routing configuration that causes the Ion Tabs bar to disappear when I navigate from the home page to the "user-trainer-view" page? How can I solve this problem and keep the Ion Tabs bar visible?

HomePage.html

<ion-header [translucent]="true">
  <!-- Header content here -->
</ion-header>

<ion-content [fullscreen]="true">
  <div class="flexTemplate" style="overflow: scroll;">
    <h3 class="textTitle">Your subscribers</h3>

    <div #cards>
      <ion-card *ngFor="let cardData of cardDataArray"
        (click)="goToUserTrainerView(cardData.id)" class="userCard">
        <div class="pholderImg" style="margin-left: 5px;">
          <img src="{{cardData.imgUri}}">
        </div>
        <ion-card-header>
          <ion-card-title>{{cardData.username}}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </div>
  </div>
  
    
</ion-content>

Solution

I would assume you have:

Initial Setup:
App
|__TabsPage
   |__HomePage
      |__Card (OnClick: Navigate to UserTrainerView with ID)
          
Navigation:
App
|__TabsPage
   |__UserTrainerViewPage (with ID, but TabsBar is missing)

For what I understand, when you navigate from the HomePage to the UserTrainerViewPage, you are actually leaving the TabsPage context which causes the Ion Tabs bar to disappear (when working with tabs in ionic).

So try and modify your goToUserTrainerView method to keep the /tabs/ prefix in the path using navigate, to make sure you remain within the TabsPage context.

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/trainer-user-view', id]);
}

Since you have defined the route for UserTrainerViewPage in tabs.module.ts, you should not need to define it again in app-routing.module.ts.

// Remove this block from app-routing.module.ts
{
    path: 'user-trainer-view/:id',
    loadChildren: () => import('./trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
}

The recommended setup would then be:

App
|__TabsPage
   |__HomePage
      |__Card (OnClick: Navigate to /tabs/trainer-user-view/{ID})
   |__UserTrainerViewPage (with ID, TabsBar is visible)

With the updated home.ts:

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/trainer-user-view', id]);
}

And your updated tabs.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../trainers/home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'trainer-user-view/:id',
        loadChildren: () => import('../trainers/user-trainer-view/user-trainer-view.module').then((m) => m.UserTrainerViewPageModule),
      }
    ],

  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule { }

Again, remove the redundant route from app-routing.module.ts.

---

Some additional checks:

Make sure you are using an absolute path in your navigation method.

goToUserTrainerView(id: any) {
  this.router.navigate(['/tabs/trainer-user-view', id]);
}

And also make sure your user-trainer-view page is being loaded within the same <ion-router-outlet> as your tabs page. That way, the tab bar should remain visible.

<ion-router-outlet></ion-router-outlet>

It may be helpful to look into Ionic lifecycle events to see if anything is affecting the tab bar visibility when navigating to the user-trainer-view page.

ionViewWillEnter() {
  console.log('Page is about to enter');
}
ionViewDidEnter() {
  console.log('Page has entered');
}

Check if there are any CSS styles that might be hiding the tab bar.

Answered By - VonC