angular - 如何直接转到选项卡

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

}

请注意，在 View 中您需要包含 #myTabs 模板变量才能在组件代码中获取选项卡的实例。

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