如何直接进入选项卡 [英] How to go directly to a Tab

问题描述

我正在尝试创建一个主屏幕页面，在那里你没有tabsmenu以及我想要一些按钮直接转到某些标签页。

I'm trying to make a homescreen page, where you don't have the tabsmenu and where I want to have some buttons to go straight to some Tab.

我正在使用函数 this.navCtrl.push（TabsPage）;

但这个函数只是去第一个标签，总是，我有一些额外的参数直接进入我的一些标签？

But this function just go to the the first tab, always, to I have some extra param to go straight to some of my tabs?

推荐答案

我是害怕它默认不包含在Ionic中，但你可以很容易地将它添加到你的应用程序中。请查看 此工作的plunker

I'm afraid it's not included in Ionic by default, but you can add it to your app very easily. Please take a look at this working plunker

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

Like you can see there, we just push the page that contains the tabs, but we send a parameter with the index of the tab that we want to select:

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

然后在包含选项卡的页面中，我们获取选项卡的实例，我们选择收到的索引作为参数（如果有）：

Then in the page that contains the tabs, we get the instance of the tabs, and we select the index received as parameter (if any):

@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 模板变量，以便能够获取组件代码中选项卡的实例。

Please notice that in the view you'd need to include the #myTabs template variable to be able to get the instance of the tabs in your component code.

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

这篇关于如何直接进入选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！