如何選擇離子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(); 
    } 
}