从根页面导航回选项卡页面会导致奇怪的闪烁

Question

该应用程序很简单，它结合了侧面菜单和选项卡。我认为它完美无缺，但直到我发现导航到root page然后按下浏览器上一个按钮导致导航栏出现奇怪的闪烁。

这是我到目前为止的output。

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

}

如果信息不充分，整个项目可用here。

更新我无法解释更清楚，但如果您尝试运行项目并在从选项卡式页面切换到非选项卡式页面时观察URL，则问题似乎来自导航历史记录。