Navigate back to tab index with ionic 4

user_2970507 0
Viewed 8085

I have a tab layout with 5 tabs. When i navigate to the second tab and then to a subpage, navigating back with ion-back-button lands on the first tab. How can i go back to the last selected tab?

Any help much appreciated! 

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'timetable', loadChildren: './timetable/timetable.module#TimetablePageModule' },
  { path: 'artistDetail/:id', loadChildren: './artist-detail/artist-detail.module#ArtistDetailPageModule' },
  { path: 'artist', loadChildren: './artist/artist.module#ArtistPageModule' },
];

Tab routes: 

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

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

Tabs

  <ion-tab label="Dashboard" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Zeitplan" icon="time" href="/tabs/(timetable:timetable)">
    <ion-router-outlet name="timetable"></ion-router-outlet>
  </ion-tab>
[...]

Tab Page which navigates to subpage of tab with routerLink

  <div class="venue-box animated fadeIn fast delay-500ms" *ngFor="let artist of data" routerLink="/artistDetail/{{artist.id}}" [ngStyle]="{'background-image': 'url(' + artist?.imagePath + ')'}">
    <div class="box">
      <h1>{{artist?.name}}</h1>
      <p>{{artist?.subtitle}}</p>
    </div>
  </div>

Header on Subpage: 

<ion-header>
  <ion-toolbar color="primary">
      <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
    <ion-title>{{artist}}</ion-title>
  </ion-toolbar>
</ion-header>
ionic4 ionic-framework angular
3 Answers
user_101549510

remove page routing from app-routing.module and then add the route of that page inside tabs.router.module something like this:

const routes: Routes = [
{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'home',
      children: [
        {
          path: '',
          loadChildren: '../../pages/home/home.module#HomePageModule'
        }
      ]
    },
    {
      path: 'jobsRequest',
      children: [
        {
          path: '',
          loadChildren: '../../pages/Jobs/jobs-request/jobs-

request.module#JobsRequestPageModule'
            },
            {
              path: 'jobs-details',
              loadChildren: '../../pages/Jobs/jobs-details/jobs-details.module#JobsDetailsPageModule'
            }
          ]
        },
    {
      path: '',
      redirectTo: '/app/tabs/home',
      pathMatch: 'full'
    }
];

you can call jobs-details page like this :

this.router.navigate(['/app/tabs/jobsRequest/jobs-details', { IsFavorite: this.IsFavorite }]);

and from jobs-details page use:

<ion-header>
  <ion-toolbar>
    <ion-title>jobs details</ion-title>
    <ion-buttons slot="end">
      <ion-back-button ></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
user_47510730

I created an Ionic 4 demo project with a tab based layout and workarounds for the ion-back-button.

The demo shows two ways how to navigate from a 'tabbed page' to a 'global page' and back, without losing tab-states.

It's correct that the ion-back-button needs to be fixed, I think this is because the ion-back-button uses only the main-IonRouterOutlet, instead of also checking tabs-IonRouterOutlet. Which means that the StackController inside the main-IonRouterOutlet only knows the route of the tabs module (e.g. 'tabs').

My custom ion-back-button-tabs component accessing the problem explained above directly (also shown in demo). ion-back-button-tabs uses the ion-back-button internally, however, it's additionally checked whether to navigate to a 'tabbed page' and if so, the last active tab route is determined.

user_35236200
Related