The app is simple, it combines side menu and tab. I thought it works flawlessly but not until I discovered that navigating to a root page then hitting the Browser previous button causes a weird flickering of the nav bar.
This is the output I am getting 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 whole project is available here if the info is not sufficient.
Update I can't explain clearer but if you try to run the project and observe the URL as you switch from a tabbed to non-tabbed page the issue seems to be from the history of navigation.
1 Answers
Answers 1
In your app.component.ts file, set the rootPage value as
rootPage: 'MenuPage'
and in your menu.ts file, set the rootPage value as
rootPage: 'HomePage' (or whatever Page you want to show in Tab).
This approach works fine for me
0 comments:
Post a Comment