[Ionic 4] Routing between tab detail pages

Ionic Framework
1

Hello everybody,

i have a question regarding tab navigation in the ionic r4 release and i hope you can help me.
Here is the situation:

I have 3 tabs:

  • Tab1 (List items of type A)
  • Tab2 (List items of type B)
  • Tab3 (List of forwarded items of type A and type B)

Tab1 & Tab2 display a list with items. By clicking on an item in Tab1 you are forwarded to a details page inside Tab1. By clicking on an item on Tab2 you are forwarded to a details page inside Tab2. Each details page has a different view. When you click on an item in Tab 3 you are forwarded to the details page of Tab1 or Tab2, depending on the item type.

To route between the tabs i use this.router.navigate(['./pipeline/tab1/tab1-details', id]);
This working quite good. My goal is the “reuse” the detail pages instead of coding it twice.

But here’s my issue. When i’m in tab1-details and want to route back with this.router.navigate(['./pipeline/tab3]); the forwarded list of my items is displayed. But when i click on the tab1 button below in the ion tab bar the view is still stuck inside the tab1-details page.
How can i show the item list of type A instead of the details?

This is my routing:

const routes: Routes = [
  {
    path: 'pipeline',
    component: PipelinePage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: './tab1/tab1.module#Tab1PageModule'
          },
          {
            path: 'tab1-details/:id/',
            loadChildren: './tab1/tab1-details/tab1-details.module#Tab1DetailsPageModule'
          },
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: './tab2/tab2.module#Tab2PageModule'
          },
          {
            path: 'tab2-details/:id/',
            loadChildren: './tab2/tab2-details/tab2-details.module#Tab2DetailsPageModule'
          },
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: './tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/pipeline/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/pipeline/tab1',
    pathMatch: 'full'
  }
];

Has anyone an idea? Thanks in advance

2

you can just use [navPush]=“nextpage” in your html page, and define your variable “nextpage” in your ts file by importing the destination page in your current page

3

@Anouar1911 thanks for your reply.
Can you give me a small example? I don’t know how to use your technique.
I was lucky that I mastered angular routing so far :grin:

4

in your html of page source : <button [navPush]=“nextpage”> nextpage

in your typescript file of page source : import { PageDst } from ‘…/page-dst/page-dst’;
and define your variable nextpage by : nextpage= PageDst;

5

@Glaenzesch I’m stuck with a similar problem. Have you found a solution yet?

6

@Anouar1911: Unfortunately this didn‘t solved my issue

7

@jeroenkroese: I created, let me say, a little workaround, because i didn’t got it running.
I moved the detail pages in the routing one level up.

const routes: Routes = [
  {
    path: 'pipeline',
    component: PipelinePage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: './tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: './tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: './tab3/tab3.module#Tab3PageModule'
          }
        ]
      }
    ]
  },
  {
    path: 'tab1-details/:id/',
    loadChildren: './tab1/tab1-details/tab1-details.module#Tab1DetailsPageModule'
  },
  {
    path: 'tab2-details/:id/',
    loadChildren: './tab2/tab2-details/tab2-details.module#Tab2DetailsPageModule'
  },
  {
    path: '',
    redirectTo: '/pipeline/tab1',
    pathMatch: 'full'
  }
];

With this the detailed pages are “not” renderd inside the tab route routlet. This approach is working for me so far.

8

Thank you! I’ll try your solution to see if this works for me.