Question

我正在努力在Ionic2中创建一个使用侧边菜单和标签导航的基本应用程序。我理解导航堆栈的概念，并且每个选项卡都有自己的导航堆栈，但我无法掌握对选项卡本身的控制。

标签启动器模板初始化一个项目，其中一个ion-nav的根页面指向“rootPage”，@App的属性指向TabsPage类。

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

TabsPage类定义3个属性，每个页面一个，指向各自的类（每个类用@Page装饰）。但是TabsPage类本身似乎没有任何功能，或者注入了一个制表符控制器，我几乎找不到关于如何获取Tabs实例的文档（{{3}上引用了实例方法） }）

我设法做了什么： 使用一个选项卡来控制另一个。

import {Page, Tabs} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/timeline/timeline.html'
})
export class Timeline {
    tabs:Tabs;
    constructor(tabs:Tabs) {
        this.tabs=tabs;
        this.selectTab(2);
    }
    selectTab(i:number) {
        this.tabs.select(i);
    }
}

上面的页面注入了一个Tabs实例，该实例继承自NavController。 Tabs实例具有所需的select方法，我可以指向不同的选项卡（按索引，而不是按名称）。因此，在这种情况下，选择我的“时间轴”选项卡将触发构造函数，而不是转到时间线选项卡，我们最终选择第二个选项卡。

我想做什么：导航到侧边菜单中带有链接的标签页。我的侧边菜单包含两个离子项，带有点击监听器的简单按钮。在Ionic 1.x中，我可以使用ui-sref或href来匹配某个状态，但在Ionic 2中，我无法弄清楚如何控制我的标签。我可以通过给它{id}并使用ion-nav来访问app.getComponent('nav')，但我不能以这种方式定位离子标签（希望它绑定到Tabs控制器实例）。

Answer 1

每个ion-tab都是NavController的声明性组件。基本上，每个选项卡都是一个NavController。有关使用导航控制器的更多信息，请查看NavController API文档。

因此，要从特定标签页（组件）内部访问标签数组，我们可以使用以下简单设置目标路径：

NavController.parent

现在假设，我们位于其中一个标签页的子页面中 - 组件类与下面的类似：

import { Component } from '@angular/core';
import { NavController, Nav , Tabs } from 'ionic-angular';

// import Tabs

import { Page2} from '../page-2/page-2';
import { Page3} from '../page-3/page-3';

@Component({
  templateUrl: 'build/pages/page-1/page1.html'
})
export class Page1 {
  tab:Tabs;

  // create a class variable to store the reference of the tabs


  constructor(public navCtrl: NavController, private nav: Nav) {
    this.tab = this.navCtrl.parent;

    /*Since Tabs are declarative component of the NavController 
      - it is accessible from within a child component. 
      this.tab - actually stores an array of all the tabs defined 
      in the tab.html / tab component.
   */
  }

  goToTab2 (){  
    this.tab.select(1);

  //  the above line is self explanatory. We are just calling the select() method of the tab
  }
  goToTab3 (){
    this.tab.select(2);
  }
}

希望这有帮助。

Answer 2

我按照以下方式开展此工作：

<强> app.ts

import {App, IonicApp, Platform} from 'ionic-angular';

@App({
  template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
})

export class TestApp {
  rootPage: any = TabsPage;
  constructor(
    private platform: Platform,
    private app: IonicApp
    ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
    });
  }
}

<强> tabs.html

        <ion-menu [content]="content">
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
          <ion-content>
            <ion-list>
              <ion-item (click)="openPage(p)" *ngFor="#p of pages;>
                <span>{{p.title}}</span>
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-menu>
        <ion-tabs id="navTabs" #content swipe-back-enabled="false">
          <ion-tab [root]="tab1"></ion-tab>
          <ion-tab [root]="tab2"></ion-tab>
          <ion-tab [root]="tab3"></ion-tab>
        </ion-tabs>

<强> tabs.ts

    import {Page, NavController, MenuController} from 'ionic-angular';
    @Page({
      templateUrl: 'build/pages/tabs/tabs.html'
    })

    export class TabsPage {

      pages: Array<{ title: string, component: any }>;
      tab1: any = Tab1;
      tab2: any = Tab2;
      tab3: any = Tab3;
      page: any = Page;


      constructor(private nav: NavController,
                  private menu: MenuController) {
        this.tab1 = Tab1;
        this.tab2 = Tab2;
        this.tab3 = Tab3;
        this.pages = [
              { title: 'page-menu', component: Page }
        ];
      }
      openPage(page) {
        // close the menu when clicking a link from the menu
        this.menu.close();
        // navigate to the new page if it is not the current page
      }
    }

Answer 3

我的解决方案：

tabs.html ：这里的主要提示是使用#tabs

<ion-tabs tabs-only tabsLayout="icon-start" color="light" #tabs>
  <ion-tab [root]="tabPage1" tabTitle="Mapa" tabIcon="qi-location arrow">
</ion-tab>
<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger"> </ion-tab>
</ion-tabs>

tabs.ts ：使用@ViewChild绑定tabs.html中使用的通配符

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

  @ViewChild('tabs') tabRef: Tabs;

  tabPage1: any = HomePage;
  tabPage2: any = InProgressPage;

  constructor() {
  }

  switchToHomePage(){
    this.tabRef.select(0);
  }

  switchToInProgressPage(){
    this.tabRef.select(1);
  }
}

redirectc的另一个页面：使用@Inject（forwardRef（（）=＆gt; TabsPage））来访问父页面方法。

export class AnotherPage {

    constructor(@Inject(forwardRef(() => TabsPage)) private tabsPage:TabsPage){}

    switchToHome(){
      this.tabsPage.switchToHomePage();
    }
}

如何在离子2中选择标签？

3 个答案: