如何直接轉到選項卡

Question

我正在嘗試製作主屏幕頁面，在那裏您沒有tabsmenu，並且我想要一些按鈕直接轉到某個選項卡。

我正在使用函數this.navCtrl.push(TabsPage);

但是，這個功能只是去第一個標籤，總是，我有一些額外的參數直接去我的一些標籤？

Answer 1

恐怕默認情況下它不包含在Ionic中，但您可以非常方便地將它添加到您的應用程序中。請看看this working plunker

就像你可以看到，我們只是把包含標籤的頁面，但我們傳遞一個參數與我們要選擇的選項卡的索引：

public openFirstTab(): void { 
    this.navCtrl.push(TabsPage); 
    } 

    public openSecondTab(): void { 
    // The second tab is the one with the index = 1 
    this.navCtrl.push(TabsPage, { selectedTab: 1 }); 
    } 

然後在包含該標籤頁面中，我們得到了標籤的情況下，我們選擇收到的參數指標（如果有的話）：

@Component({...}) 
export class TabsPage { 
    @ViewChild('myTabs') tabRef: Tabs; 

    private selectedTab: number; 

    public tab1Root = FirstTabPage; 
    public tab2Root = SecondTabPage; 

    constructor(private navParams: NavParams) { 
    this.selectedTab = this.navParams.get('selectedTab') || 0; 
    } 

    ionViewWillEnter() { 
    if(this.selectedTab) { 
     this.tabRef.select(this.selectedTab); 
    } 
    } 

} 

請注意，在你需要的視圖包括#myTabs模板變量能夠獲取組件代碼中選項卡的實例。

<ion-tabs #myTabs> 
    <ion-tab [root]="tab1Root" tabTitle="First Tab"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Second Tab"></ion-tab> 
</ion-tabs>