Ionic4 - Tab-Layout with nested segment-bar navigation/routing


Hey Guys,

I have the following use-case:

I use a tab-layout in my ionic 4 app and have a segment-bar to switch between components of one tab, nested into my tab-pages (by importing the components’ modules in my tab-page and using their selector in the html-file). This was for ionic3 perfectly fine.

Unfortunately, when I use this style, my nested components do not have any route. Just my tab-pages have routes defined in the tabs.router.module.ts. Nevertheless, I want to navigateForward from the nested components to other pages which do have routes. And this is for me semantically not correct.

For example:

tab1 route: private/app/tabs/home (defined in tabs.router.module.ts as path of a child)

  • segment1 imports achievements.module.ts
  • segment2 imports news.module.ts

tab2 route: private/app/tabs/profile (defined in tabs.router.module.ts as path of a child)

  • segment1 imports account.module.ts
  • segment2 imports friends.module.ts

Now I want to navigateForward from tab2, segment1 to “change account”. At this point, I use the route private/app/tabs/profile/account/change for this. Also, I want to navigateForward from tab2, segment2 to “edit friends” with the route private/app/tabs/profile/friends/edit.

For me, it’s semantically not correct routing because the routes private/app/tabs/profile/account and private/app/tabs/profile/friends don’t exist. If I use private/app/tabs/profile/change and private/app/tabs/profile/edit it wouldn’t be correct as well because the “account” and “friends” part would be missing.

Unfortunately, I don’t know how I can change this to a better solution. Do you have advises?

Thanks in advance