Question

该应用程序会打开一个名为IntroPage的着陆页，其上有两个按钮，BUY和SELL。单击其中一个按钮时，它会将您带到买入或卖出标签。

我尝试了三种不同的技术，基于来自不同来源的研究，例如this，this和this。例如：

A：

this.navCtrl.setRoot(TabsPage);

B：

this.navCtrl.parent.select(2);

C：

  selectTab(index: number) {
      var t: Tabs = this.navCtrl.parent;
      t.select(index);
  }

我目前的设置：

INTRO

<button ion-button color="light" (click)="selectTab(0)">Buy</button>
<button ion-button color="light" (click)="selectTab(1)">Sell</button>

export class IntroPage {    

  constructor(public navCtrl: NavController,
    public alertCtrl: AlertController,
    public authData: AuthData,
    private zone:NgZone,
    public loadingCtrl: LoadingController) {
  }

  selectTab(index: number) {
      var t: Tabs = this.navCtrl.parent;
      t.select(index);
  }

}

TABS

<ion-tabs>
  <ion-tab [root]="tab1Root" ></ion-tab>
  <ion-tab [root]="tab2Root" ></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
  <ion-tab [root]="tab5Root" ></ion-tab>
  <ion-tab [root]="tab5Root" ></ion-tab>
</ion-tabs>

export class TabsPage {
  tab1Root = BuyPage;
  tab2Root = SellPage;
  tab3Root = ExamplePage2;
  tab4Root = ExamplePage3;
  tab5Root = ExamplePage4;

  constructor(public navCtrl: NavController,public authData: AuthData) {
    this.onAuthCallback = this.onAuthCallback.bind(this);
  }

}

Answer 1

在TabsPage模板中添加selectedIndex attr到ion-tabs标记。像这样

<ion-tabs [selectedIndex]="tabIndex">
  <ion-tab [root]="tab1Root" ></ion-tab>
  <ion-tab [root]="tab2Root" ></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
  <ion-tab [root]="tab5Root" ></ion-tab>
  <ion-tab [root]="tab5Root" ></ion-tab>
</ion-tabs>

在您的组件文件中声明tabIndex变量，在使用navParams函数时通过setRoot动态设置它的值。

export class TabsPage {
  tab1Root = BuyPage;
  ...
  tabIndex:string = 1;

  constructor(public navCtrl: NavController,params: NavParams,public authData: AuthData) {
    this.tabIndex = this.params.get('tabIndex');
    this.onAuthCallback = this.onAuthCallback.bind(this);
  }

}

然后从任何其他页面传递此tabIndex，其中包含您要导航的标签索引。例如，更改您的selectTab功能，

selectTab(index: number) {
      this.navCtrl.setRoot(TabsPage,{tabIndex:'1'})
  }

从Landing导航到Ionic 2+中的特定Tab动态

1 个答案: