如何使用Ionic2中另一页上的按钮切换标签？

Question

我不确定如何tab2Root使用我help.html页面上的按钮打开它.我正在阅读文档,但没有任何相关内容.

help.html:

<button ion-button large clear icon-end color="primary">
    Shop <ion-icon name="arrow-forward"></ion-icon>
</button>

tabs.html:

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Products" tabIcon="search"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Cart" tabIcon="cart"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="Account" tabIcon="person"></ion-tab>
    <ion-tab [root]="tab5Root" tabTitle="Help" tabIcon="help-buoy"></ion-tab>
</ion-tabs>

Answer 1

您可以在help.ts类中创建一个函数,如下所示:

SwitchTab(){
  this.navCtrl.parent.select(0); //Selects the first tab
}

为了使navCtrl对象可用,你必须用你的类的构造函数注入它:

import { NavController } from 'ionic-angular';
...

constructor(private navCtrl: NavController) {
}

不要忘记将按钮绑定到类中的SwitchTab方法,如下所示:

<button ion-button large clear icon-end color="primary" (click)="SwitchTab()">
  Shop <ion-icon name="arrow-forward"></ion-icon>
</button>