2

我在 Ionic 2 中创建了一个侧边菜单应用程序，其中包含一个主选项卡和 3 个子选项卡页。它看起来像这样：

在此处输入图像描述

这是主标签页的代码：

    <ion-header>
        <ion-navbar #content color="black">
            <button ion-button menuToggle>
              <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title >Main Tab</ion-title>
          </ion-navbar>
    </ion-header>
<ion-tabs [selectedIndex]="mySelectedIndex" #myTabs>
    <ion-tab [root]="tabARoot" tabTitle="Tab A" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tabBRoot" tabTitle="Tab B" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tabCRoot" tabTitle="Tab C" tabIcon="information-circle"></ion-tab>
</ion-tabs>

它包含 3 个子标签页，上面有一些乱码。

这就是我的侧边菜单的样子。

在此处输入图像描述

因此，当用户从侧面菜单单击选项卡 B 链接时，他应该导航到主选项卡页面，并选择选项卡 B。但是现在当我单击时，默认选择选项卡 A。

是否有可能改变这种行为？

我的 app.component.ts 文件看起来像这样

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, App, Tabs } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MainPage } from '../pages/main/main';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = MainPage;
  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private app: App) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Tab A', component: MainPage },
      { title: 'Tab B', component: MainPage },
      { title: 'Tab C', component: MainPage },
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

显然，我从某个地方得到了一个不起作用的解决方案。在那个解决方案中，有人提到要像下面给出的那样做，但它不起作用'

this.nav.setRoot(page.component, {tabIndex: 2});
4

2 回答 2

1

在 ion-tabs 组件中有一个名为 selectedIndex 的属性来设置默认选项卡。由于您在单击主选项卡时传递 tabIndex ，因此您可以执行以下操作

在控制器中

selectedTabIndex = navParams.get('tabIndex');

在视图中

<ion-tabs [selectedIndex]="selectedTabIndex">
 <ion-tab [root]="tabA"></ion-tab>
 <ion-tab [root]="tabB"></ion-tab>
 <ion-tab [root]="tabC"></ion-tab>
</ion-tabs>

否则，如果您想以编程方式从控制器中选择任何选项卡，您可以这样做，首先获取选项卡的引用，然后您可以使用 select() 函数通过传递索引来设置您想要的选定选项卡

@ViewChild('myTabs') tabRef: Tabs;


ionViewDidLoad() {
    this.tabRef.select(1, { animate: false });
}
于 2018-02-26T11:42:22.033 回答
-1

@john Doe

设置根页面 = 'MenuPage' 页面

rootPage = 'MenuPage'

试试下面的代码：` src/pages/menu/menu.html：

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
          {{ p.title }}
        </button>
    </ion-list>
  </ion-content>
</ion-menu>

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

src/pages/menu/menu.ts：

import { Tab2Page } from './../tab2/tab2';
import { Tab1Page } from './../tab1/tab1';
import { TabsPage } from './../tabs/tabs';
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, Nav } from 'ionic-angular';

export interface PageInterface {
  title: string;
  pageName: string;
  tabComponent?: any;
  index?: number;
  icon: string;
}

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {
  // Basic root for our content view
  rootPage = 'TabsPage';

  // Reference to the app's root nav
  @ViewChild(Nav) nav: Nav;

  pages: PageInterface[] = [
    { title: 'Tab 1', pageName: 'TabsPage', tabComponent: 'Tab1Page', index: 0, icon: 'home' },
    { title: 'Tab 2', pageName: 'TabsPage', tabComponent: 'Tab2Page', index: 1, icon: 'contacts' },
    { title: 'Special', pageName: 'SpecialPage', icon: 'shuffle' },
  ];

  constructor(public navCtrl: NavController) { }

  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 };
    }

    // The active child nav is our Tabs Navigation
    if (this.nav.getActiveChildNav() && page.index != undefined) {
      this.nav.getActiveChildNav().select(page.index);
    } else {
      // Tabs are not active, so reset the root page 
      // In this case: moving to or from SpecialPage
      this.nav.setRoot(page.pageName, params);
    }
  }

  isActive(page: PageInterface) {
    // Again the Tabs Navigation
    let childNav = this.nav.getActiveChildNav();

    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }

    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';
    }
    return;
  }

}

src/pages/tabs/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="contacts"></ion-tab>
</ion-tabs>

src/pages/tabs/tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {

  tab1Root: any = 'Tab1Page';
  tab2Root: any = 'Tab2Page';
  myIndex: number;

  constructor(navParams: NavParams) {
    // Set the active tab based on the passed index from menu.ts
    this.myIndex = navParams.data.tabIndex || 0;
  }
}

谢谢

于 2018-02-26T11:39:47.463 回答