Angularjs 爱奥尼亚手动更改标签页

我有一个选项卡页面，其中有五个选项卡，我知道我可以通过单击相应的选项卡图标来更改导航到这些页面，但我想使用第一个选项卡页面中的按钮手动更改它，当我单击此按钮时，我可以转到第二个选项卡页面，我可以做什么？

您可以使用代码来更改它。我现在做的是，当从tab1单击按钮时，我们在ts中调用一个函数，该函数在tabs.ts中使用event.publish调用event方法，在tabs.ts文件中，您可以捕获单击的事件，因此在tabs.ts中，您可以使用viewchild并在中使用tabs的select方法

home.html tabs.html 可能重复的

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content  #content>
    <button ion-button (click)="goToNextTab()">go to next Tab</button>
</ion-content>

import { Component,ViewChild } from '@angular/core';
import { NavController,Content } from 'ionic-angular';
import { Events } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage 
{    
    constructor(public navCtrl: NavController,public events: Events) 
    {}

    goToNextTab()
    {
        this.events.publish('tab:clicked',{tab:1});
    }
}

<ion-tabs #myTabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

import { Component, ViewChild } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { Events, Tabs } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage 
{
    tab1Root = HomePage;
    tab2Root = AboutPage;
    tab3Root = ContactPage;
    @ViewChild('myTabs') tabRef: Tabs;
    constructor(public events: Events) 
    {
        events.subscribe('tab:clicked', (data) => 
        {
            this.tabRef.select(data['tab']);
        });
    }
}