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

Question

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

这是我到目前为止的输出.

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

}

如果信息不充分,可以在这里找到整个项目.

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

Answer 1

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

rootPage: '菜单页'

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

rootPage：“主页”（或您想在选项卡中显示的任何页面）。

这种方法对我来说效果很好