如何直接转到选项卡

Question

我正在尝试制作一个主屏幕页面，您没有选项卡菜单，并且我想在其中有一些按钮直接转到某些选项卡。

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

但是这个函数只是转到第一个选项卡，总是，我有一些额外的参数可以直接转到我的一些选项卡？

Answer 1

恐怕默认情况下它不包含在Ionic中，但是您可以轻松地将其添加到您的应用程序中。请看一下这个工作弹道

机就像你在那里看到的，我们只是推送包含选项卡的页面，但我们发送一个参数，其中包含我们要选择的选项卡的索引：

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>