ionic 3 侧边菜单和标签菜单导航答案

【问题标题】：ionic 3 side menu and tabs menu navigationionic 3 侧边菜单和标签菜单导航
【发布时间】：2018-07-12 10:34:24
【问题描述】：

在我的应用程序中，我有一个带有项目（主页、联系人、tab1、tab2）的侧边菜单和带有选项卡（tab1、tab2）的选项卡菜单。当我从侧面菜单单击 tab1 或 tab2 时，选项卡菜单在我的页面上与侧面菜单可见，但是当我从侧面菜单单击主页或联系人时，选项卡菜单消失。我需要所有页面的标签菜单和侧边菜单。如果我从侧边菜单点击主页，标签菜单应该在主页中没有活动标签。

感谢您的帮助。

Tabs.html

<ion-tabs [selectedIndex]="myIndex">
    <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="HOME"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="BOND"></ion-tab>
  </ion-tabs>

Tabs.ts

 tab1Root = Tab1Page; tab2Root = Tab2Page;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myIndex = navParams.data.tabIndex;
  }

菜单.ts

rootPage = TabsPage;


@ViewChild(Nav) nav: Nav;
  pages: PageInterface[] = [
    { title: 'Home', component: HomePage },
      { title: 'Contact', component: ContactPage},
      { title: 'Tab 1', component: TabsPage,tabComponent: Tab1Page, index:0 },
      { title: 'Tab 2', component: TabsPage,tabComponent: Tab2Page, index:1 },
  ];
  constructor(public navCtrl: NavController, public navParams: NavParams,
  private app:App) {
  }
  openPage(page: PageInterface)  {
    let params = {};

    // The index is equal to the order of our tabs inside tabs.ts
    if (page.index) {
      params = { tabIndex: page.index };
    }

    // If tabs page is already active just change the tab index

      if (this.nav.getActiveChildNavs().length && page.index != undefined) {
        this.nav.getActiveChildNavs()[0].select(page.index);
      } else {

        this.nav.setRoot(page.component,params);
      }

  }

菜单.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title text-center class="clss_toogle_mnu"></ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="menu_background">
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <span>{{p.title}}</span>
      </button>
    </ion-list>

</ion-content>

</ion-menu>


<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

编辑：在 menu.ts 中，我在 setRoot 中添加了参数。

【问题讨论】：

标签： tabs navigation ionic3 ionic-tabs

【解决方案1】：

在你的 menu.ts 文件中尝试这种方式

pages: PageInterface[] = [
{ title: 'Menu', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon: 'home' },
{ title: 'List', pageName: 'TabsPage', tabComponent: 'ListPage', index: 1, icon: 'contacts' },
{ title: 'Test', pageName: 'TestPage', icon: 'home' }]

并在 openPage 方法中尝试这样做

if (this.nav.getActiveChildNavs() && page.index != undefined) {
    this.nav.getActiveChildNavs().push(page.index);
} else {
  this.nav.push(page.pageName);      
}

希望对你有帮助

【讨论】：