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

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，问题似乎来自导航历史。

Answer 1

在您的 app.component.ts 文件中，将 rootPage 值设置为

rootPage: '菜单页'

在 menu.ts 文件中，将 rootPage 值设置为

rootPage: 'HomePage'（或者你想在 Tab 中显示的任何页面）。

这种方法对我很有效