如何选择离子2中的选项卡？

Question

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

标签初学者模板初始化一个项目，其中一个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中我无法弄清楚如何控制我的选项卡。 我可以通过给它一个id并使用app.getComponent('nav')来访问ion-nav，但我无法以这种方式定位离子选项卡（希望它会绑定到Tabs控制器实例）。

Answer 1

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

所以，从一个特定的标签页（组件）内访问标签的数组，我们可以设置我们的目标路径以简​​单：

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在标签中使用的外卡绑定。 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：U se @Inject（forwardRef（（）=> TabsPage））可以访问父页面方法。

export class AnotherPage { 

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

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