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：＆＃39; MenuPage＆＃39;

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

rootPage：＆＃39;主页＆＃39; （或者你想在Tab中显示的任何页面）。

这种方法适用于我

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

1 个答案: