How to switch between two "ion-tabs pages"

Ionic Framework ionic-v3
1

Hy everybody,

In our ionic app we have two pages (accessible through the side menu) containing ion-tabs.

tabsPage1 :

  • tab1Page1
  • tab1Page2

tabsPage2 :

  • tab2Page1
  • tab2Page2

When we want to switch from the tabsPage1 to the tabsPage2, the tabsPage2 doesn’t try to load his tab2Page1 but try to reload the tab1Page1.

Here is the lifecyle :

-> Opening Page 1 (ion-tabs)

// Page 1 (ion-tabs) loading
TABS tabsPage1 : ionViewCanEnter
TABS tabsPage1 : ionViewDidLoad
TABS tabsPage1 : ionViewWillEnter
TABS tabsPage1 : ionViewDidEnter

_// first tab of Page 1 (ion-tabs) loading _
TAB tab1Page1 : ionViewCanEnter
TAB tab1Page1 : ionViewDidLoad
TAB tab1Page1 : ionViewWillEnter
TAB tab1Page1 : ionViewDidEnter

-> then navigate to Page 2 (ion-tabs)

TABS tabsPage1 : ionViewCanLeave
TABS tabsPage2 : ionViewCanEnter
TABS tabsPage2 : ionViewDidLoad

// arg ! why the first tab of Page 1 (ion-tabs) onViewCanEnter function is called ? should be TAB tab1Page2 : ionViewCanEnter instead
TAB tab1Page1 : ionViewCanEnter

TABS tabsPage1 : ionViewWillLeave
TABS tabsPage2 : ionViewWillEnter
TABS tabsPage2 : ionViewDidEnter
TABS tabsPage1 : ionViewDidLeave
TABS tabsPage1 : ionViewWillUnload

// the first tab of Page 1 (ion-tabs) is unload but the first tab of Page2 (ion-tabs) is never called
TAB tab1Page1 : ionViewWillUnload

When I inspect the DOM, the tabsPage1 is replaced by tabsPage2 but the first tab is the tab1Page1 instead of tab1Page2

Is it possible to navigate between two ion-tabs page ?

(Excuse my english)

2

Hi,
where you able to find a solution to this problem? I’m trying to do something similar.

Please share if you have found a solution.

1 Like
3

I also struggle with this problem.

4

I managed to use Segments for the first page. And then tabs.

5

Hi everyone, this is the trick

I use a boolean ‘displayTabs’ in my two tabsPage.
This boolean is used in the template to create the ion-tabs component in TabsPage2 only when the view did enter, AFTER than the TabsPage1 is no more present on the DOM.

=> TabsPage1

@Component({
    ....
    template: '<ion-tabs *ngIf="displayTabs===true">....</ion-tabs>'
    ....
})
export class TabsPage1 {

    ....
    displayTabs: boolean = false;
    ....

    ionViewDidEnter() {
        // once view did enter the displayTabs is set to true
        this.displayTabs = true;
     }
    ....        
}

=> TabsPage2

@Component({
    ....
    template: '<ion-tabs *ngIf="displayTabs===true">....</ion-tabs>'
    ....
})
export class TabsPage2 {

    ....
    displayTabs: boolean = false;
    ....

    ionViewDidEnter() {
        // once view did enter the displayTabs is set to true
        this.displayTabs = true;
     }
    ....        
}
1 Like
6

Accept this as an answer then :slight_smile: This is a much searched post!

1 Like