Ionic 4 tabs : navigation to children and come back

Ionic Framework Ionic Angular
1

Hi, I have a problem on navigation from tabs and their children : for example, this is my tabs routing :

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'new-traitement',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../new-traitement/new-traitement.module').then(m => m.NewTraitementPageModule)
          },
          {
            path: 'question',
            children: [
              {
                path: '',
                loadChildren: () =>
                    import('../question-traitement/question-traitement.module').then(m => m.QuestionTraitementPageModule)
              }
            ]
          },
          {
            path: 'question2',
            children: [
              {
                path: '',
                loadChildren: () =>
                    import('../question2-traitement/question2-traitement.module').then(m => m.Question2TraitementPageModule)
              }
            ]
          }
        ]
      },
      {
        path: 'traitements',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../traitements/traitements.module').then(m => m.TraitementsPageModule)
          },
          {
            path: 'detail',
            children: [
              {
                path: '',
                loadChildren: () =>
                    import('../detail-traitement/detail-traitement.module').then(m => m.DetailTraitementPageModule)
              }
            ]
          }
        ]
      },
      {
        path: 'soins',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../soins/soins.module').then(m => m.SoinsPageModule)
          },
          {
            path: 'detail',
            children: [
              {
                path: '',
                loadChildren: () =>
                    import('../detail-soin/detail-soin.module').then(m => m.DetailSoinPageModule)
              }
            ]
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/traitements',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/traitements',
    pathMatch: 'full'
  }
];

when I navigate to ‘new-traitement’ by clicking in the first tab, I go to the page ‘/tabs/new-traitement’. inside this page, I have a button which goes to ‘question’ --> ‘/tabs/new-traitement/question’, until here, all is OK.

If I click to another tab, and i come back in the first tab, I didn’t go to the ‘/tabs/new-traitement’ page but to ‘/tabs/new-traitement/question’ page. It’s a good thing because it keeps in mind my precedent action on the first tab.

Now, I have another button in ‘/tabs/new-traitement/question’ page which redirect me to another page in an other tab (’/tabs/traitements/detail’). But now, what I want is if I click on the first Tab, I don’t want to be redirected to ‘/tabs/new-traitement/question’ page but to ‘/tabs/new-traitement’ page. I don’t want to keep in mind my first action but initialize the first tab.

How I can do this?
I Have found some parameters on angular Router (extras) to use un NavigateByUrl but I have found any parameter which works
https://angular.io/api/router/NavigationExtras

2

While you wait for arguably more constructive answers, I would urge you to reread your own post.

Users expect tabs to work this way, and users really expect UI constructs to behave consistently. Generally with posts on this topic, people don’t even bother to nod at the notion that what they are asking tabs to do is out of their character. You do apparently respect that there’s value here, but then are considering working to undermine it.

So before you go further down this road, I would suggest thinking whether (a) it’s really worth creating an inconsistent UI, and (b) how committed you are to using tabs at all. Because if you abandon tabs, then you’re also freeing yourself from the baggage of how users expect them to behave.

1 Like