如何直接进入选项卡

Question

我正在尝试制作一个主屏幕页面，其中没有选项卡菜单，而我希望有一些按钮可以直接转到某个选项卡。

我正在使用函数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>