Ionic4 Tabs

Ionic Framework
1

Hi,

I am working with Ionic4, trying to get tabs set up.
I wanted to have individual navigation stacks in each tab…

The tab bar persists at the bottom of most pages, and within each tab, I can navigate through various pages.

In Ionic 3…
When I switch tabs, I go back to the last page I visited on that tab, and can push / pop on that particular navigation stack.

In Ionic 4…
When I switch tabs, I go back to the root page.
I have tried with a “routed” setup where I change the route to go to new pages, and with an ion-nav then push/pop components to the stack.

Neither option has worked.
I think this is a fundamental aspect of the tabs feature, but I’m really struggling to get anything working.

Thanks!

Ian

2

Hello.
J’ai commencer un projet avec v4 et chez moi le push et pop ne fonctionnais pas.
J’utilise le /href et mon routage fonctionne bien

3

@Ludolefrenchy
For push/pop in V4, use an ion-nav, and in your controller, use “Nav” rather than “NavController”

import {Nav} from '@ionic/angular'
...
constructor(
  public navCtrl: Nav,
)

public gotoPage2(){
  this.navCtrl.push(Page2Component);
}
4

I have managed to get this working with:
tabs.page.html:

<ion-tabs #allTabs>
  <ion-tab #homeTab name="home" label="Home" icon="home">
    <ion-nav [root]="homeTabRoot"></ion-nav>
  </ion-tab>
  <ion-tab #aboutTab name="about" label="About" icon="information-circle">
    <ion-nav [root]="aboutTabRoot"></ion-nav>
  </ion-tab>
</ion-tabs>

tabs.page.ts:

export class TabsPage {
  @ViewChild('allTabs') pageTabs:Tabs;
  @ViewChild('homeTab') homeTab:Tab;

  homeTabRoot = HomePage;
  aboutTabRoot = AboutPage;

  ngOnInit(){
    this.pageTabs.select(0)
  }
}

home.page.ts:

import { Nav } from '@ionic/angular';
import { Page2Component } from './page2.component.ts';
...
constructor(
  public navCtrl: Nav
) { }
...
gotoPage2(){
  this.navCtrl.push(Page2Component);
}

The tabs now seem to have their own nav stacks.
Not ideal as it is not using the angular router / ion-router-outlet.

1 Like
5

ok merci pour l’info, je garde sous le coude pour la prochaine fois :wink:

6

Hi in the latest ionic 4 this isn’t working.
ion-tab not exists.
If I modify your code with the new tabs structure, and then place the ion-nav inside the ion-tab-buttons, than the pages rendered inside the tab buttons. So that’s not good.
Do you have any other solution? Since this post is quite old, maybe there is better solution.
We migrating ionic 3 app to ionic 4, and created the tabs with angular router.
But we have shared pages what we need to push and pop to the nav stack. We tried to use separate route for those shared components, but this part of the application is to complex to refactor. We want to stick to the push and pop style within tabs, is that even possible?
Thanks.

7

In my case, finally in the <ion-tab-button> for Ionic 5, I had to combine tab with routerLink and it works perfectly for me: The reason? I don’t know hehe! But I found no other way without using the eventHandler, navController and without handling lifecycle:

<ion-tab-button class="dashboard__button" tab="beneficiaries" routerLink="/dashboard/beneficiaries">

So every time you exit and return, it will always be for the root page.

If there is an optimal alternative, please confirm.