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

Question

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

tabs starter模板初始化一个项目,其中一个项目ion-nav的根页面指向"rootPage",这是@App指向TabsPage类的属性.

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

TabsPage类定义了3个属性,每个页面对应一个属性,指向各自的类(每个类都用它来装饰@Page).但是TabsPage类本身似乎没有任何功能,或者注入了一个标签控制器,我发现很少甚至没有关于如何获取Tabs实例的文档(在http://ionicframework.com/docs上引用了实例方法)/ v2/api/components/tabs/Tabs /)

我设法做的: 使用一个选项卡来控制另一个.

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中,我无法弄清楚如何控制我的标签.我可以ion-nav通过给它一个id和使用来访问它app.getComponent('nav'),但是我不能以这种方式定位ion-tabs(希望它被绑定到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);
  }
} 

希望这可以帮助.