Going back from the root page to the tab causes a strange flicker

Question

The application is simple, it combines a side menu and a tab. I thought this worked flawlessly, but until I found that switching to the root page and then pressing the previous browser button causes a strange flicker of the navigation bar.

This is the output I get so far.

Menu.ts

 import { Component,ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams, Nav } from 'ionic-angular'; export interface PageInterface { title: string; pageName: string; tabComponent?: any; index?: number; icon: string; } // Am I doing some mistakes in the following block? @IonicPage({ }) @Component({ selector: 'page-menu', templateUrl: 'menu.html' }) export class MenuPage { rootPage ="TabsPage"; @ViewChild(Nav) nav: Nav; pages: PageInterface[]= [ { title:'Tab 1', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon:'home' }, { title:'Tab 2', pageName: 'TabsPage', tabComponent: 'SchedulePage', index: 1, icon:'timer' }, { title:'Tab 3', pageName: 'TabsPage', tabComponent: 'CasesPage', index: 2, icon:'briefcase' }, { title:'Non-Tab', pageName: 'SplashPage', icon:'information-circle' } ] constructor(public navCtrl: NavController, public navParams: NavParams) { } openPage(page: PageInterface) { let params = {}; if (page.index) { params = { tabIndex: page.index}; } if (this.nav.getActiveChildNavs().length && page.index != undefined) { this.nav.getActiveChildNavs()[0].select(page.index); console.log('Else executed umdefined'); } else { // This is where I set new root page if it is not a tabbed page. this.nav.setRoot(page.pageName, params).catch((err: any) => { console.log(`Didn't set nav root: ${err}`); }); } } isActive(page: PageInterface) { let childNav = this.nav.getActiveChildNavs()[0]; if (childNav) { if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) { return 'primary'; } return; } if (this.nav.getActive() && this.nav.getActive().name === page.pageName) { return 'primary'; } return; } ionViewDidLoad() { console.log('MenuPage'); } } 

Tabs.ts

 @IonicPage({ segment: 'page-tabs' }) @Component({ templateUrl: 'tabs.html' }) export class TabsPage { tab1Root= 'HomePage'; tab2Root= 'SchedulePage'; tab3Root= 'CasesPage'; myIndex: number; constructor(public navCtrl: NavController, public navParams: NavParams) { } } 

The entire project is available here if the information is insufficient.

Update I cannot explain more clearly, but if you try to start the project and see the URL when switching from tab to non-tab, the problem seems to be related to the navigation history.

Answer 1

In the app.component.ts file, set rootPage to

rootPage: 'MenuPage'

and in your menu.ts file set rootPage as

rootPage: "Homepage" (or any page that you want to display in Tab).

This approach works great for me