Navigieren zurück von einer Root-Seite zu einer Registerkarte-Seite verursacht seltsames Flackern

Question

Die App ist einfach, es kombiniert Seitenmenü und Registerkarte. Ich dachte, es funktioniert einwandfrei, aber erst, als ich entdeckte, dass die Navigation zu einem root page dann das Drücken der vorherigen Browser-Taste ein seltsames Flackern der Navigationsleiste verursacht.

Dies ist output ich so weit bin immer.

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) { 
    } 

} 

Das gesamte Projekt ist verfügbar here, wenn die Informationen nicht ausreichend ist.

aktualisiert Ich kann nicht deutlicher erklären, aber wenn Sie versuchen, das Projekt und beobachten Sie die URL laufen, wie Sie von einem Tabbed zu nicht-tabbed Seite wechseln das Thema aus der Geschichte der Navigation zu sein scheint.

Answer 1

In Ihrer app.component.ts Datei den rootPage Wert als

rootPage: 'Menüseite'

und in Ihrer menu.ts Datei des rootPage Wert als

rootPage: 'HomePage' (oder die Seite, die Sie in Tab anzeigen möchten).

Dieser Ansatz funktioniert gut für mich