Cách chọn tab trong ionic 2?

Question

Tôi đang cố gắng tạo một ứng dụng cơ bản trong Ionic2 sử dụng cả menu bên và điều hướng tab. Tôi hiểu các khái niệm về ngăn xếp điều hướng và mỗi tab có ngăn xếp điều hướng riêng, nhưng tôi không thể nắm quyền kiểm soát các tab.

Mẫu khởi động tab bắt đầu dự án với một ion-nav có trang gốc của nó trỏ tới "rootPage", thuộc tính của @App trỏ đến lớp TabsPage.

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

Lớp TabsPage định nghĩa 3 thuộc tính, một cho mỗi trang, trỏ đến các lớp học của mình (mỗi lớp được trang trí với @Page). Nhưng lớp TabsPage bản thân dường như không có bất cứ chức năng, hoặc được tiêm với một bộ điều khiển tab và tôi thấy ít hoặc không có tài liệu hướng dẫn về cách để có được một trường hợp Tabs (có những phương pháp dụ được giới thiệu trên http://ionicframework.com/docs/v2/api/components/tabs/Tabs/)

gì Tôi đã thực hiện: Sử dụng một tab để điều khiển thẻ còn lại.

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

Trang ở trên được tiêm một phiên bản Tab được kế thừa từ NavController. Ví dụ Tab có phương thức select mong muốn và tôi có thể trỏ đến một tab khác (theo chỉ mục, không theo tên). Vì vậy, trong tình huống này, chọn tab 'dòng thời gian' của tôi sẽ kích hoạt hàm tạo và thay vì chuyển đến tab dòng thời gian, chúng tôi sẽ chọn tab thứ hai.

Tôi muốn làm gì: điều hướng đến tab có liên kết trong menu bên. Menu phụ của tôi bao gồm hai mục ion, các nút đơn giản với trình nghe nhấp chuột. Trong Ionic 1.x tôi có thể sử dụng ui-sref hoặc a href để phù hợp với một trạng thái nhất định, nhưng trong Ionic 2 tôi không thể tìm ra cách kiểm soát các tab của mình. Tôi có thể truy cập ion-nav bằng cách cho nó một id và sử dụng app.getComponent('nav'), nhưng tôi không thể nhắm mục tiêu các tab ion theo cách này (hy vọng nó sẽ bị ràng buộc vào một trường hợp bộ điều khiển Tabs).

Answer 1

Mỗi tab ion là một thành phần khai báo cho một NavController. Về cơ bản, mỗi tab là một NavController. Để biết thêm thông tin về việc sử dụng bộ điều khiển điều hướng, hãy xem Tài liệu API NavController.

Vì vậy, để truy cập vào các mảng của các tab từ bên trong một trang tab cụ thể (thành phần), chúng tôi có thể thiết lập đường dẫn đích của chúng tôi với đơn giản như:

NavController.parent 

Bây giờ giả sử, chúng ta đang ở trong một trang con của một trong các tab của chúng tôi - lớp thành phần sẽ có phần tương tự như sau:

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

Hy vọng điều này sẽ hữu ích.

Answer 2

tôi nhận làm việc này bằng cách sau:

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

giải pháp của tôi:

tabs.html: Những mẹo chính ở đây là sử dụng #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: Sử dụng @ViewChild để ràng buộc các thẻ hoang dã được sử dụng trong các tab. 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); 
    } 
} 

Một trang khác để redirectc: U se @Inject (forwardRef (() => TabsPage)) để truy cập vào các phương thức trang gốc.

export class AnotherPage { 

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

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