如何直接进入选项卡

Question

我正在尝试制作一个主屏幕页面,你没有tabmenu,我想要一些按钮直接进入某个Tab.

我正在使用这个功能this.navCtrl.push(TabsPage);

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

Answer 1

我担心默认情况下它不包含在Ionic中,但您可以非常轻松地将它添加到您的应用程序中.请看看这个工作的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>