Ionic 4: Navigation inside a tab

Ionic Framework
1

Hey guys,

I’m currently struggling with navigation in Ionic 4. I’m using the tabs template. I’m just trying to navigate one route deeper inside a tab. My tabs.routing.module looks like this:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage,

        children: [
          { path: 'item', outlet: 'info', component: ItemInfoPage}
        ]
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

As you can see I have 4 tabs. Inside the InfoPage (which is a tab) I have a nested Page called item-info. I thought with setting up a child route for the info tab I could navigate via /tabs/(info:info)/item to my nested item-info.page. But that I won’t work. I will just get redirected to /tabs/(info:info)

Also I don’t get why I have to navigate to /tabs/(info:info) to reach my info tab. I mean the path I setup was info. Why can’t I just use /tabs/info?

1 Like
2

Hey!

I’m actually looking for the exact same solution.
I just posted on stackoverflow about this.

https://stackoverflow.com/questions/52577779/ionic-4-angular-6-nested-child-routes-in-tabs

Also I don’t get why I have to navigate to /tabs/(info:info) to reach my info tab. I mean the path I setup was info . Why can’t I just use /tabs/info ?

Someone answered about that :

https://stackoverflow.com/questions/52010247/ionic-4-tabs-starter-what-does-href-tabs-contactcontact-do

3

I came up with a solution. I guess this is the way to do it.

But i’ll be happy to know if there is a different approach :).

4
1 Like
5

Thank you guys! So you create another page and create a route inside the tabs.router.module with the outlet set to the same outlet as the “parent”. That works but it’s not really a child.

Another problem this way is, when you route to the child page (in your case the details page), then switch to another tab and then click back on the home tab, you go to the home tab. I would prefer to, when clicking again on the home tab to still be in the details page. is this somehow possible?

6

Demo (with two different approaches) + Explanation:

With 4.0.0-beta.18 ion-tab was removed and it’s not necessary to use named outlets.

Ionic CLI version 4.10.3
Ionic Framework @ionic/angular 4.0.1

1 Like
7

@servrox example complies with latest ionic tabs starter.

Thanks for sharing!

8

@JonasCoding Have you done this?