离子手动更改标签页

Question

我有一个标签页，里面有五个标签，我知道我可以通过单击相应的标签图标来更改导航到这些页面，但是我想使用第一个标签页中的按钮手动更改它，以及何时我点击这个按钮，我可以转到第二个标签页，我该怎么办？

Answer 1

你可以用一个代码吧。我在这里做的是，当从 tab1 按钮单击时，我们在 ts 中调用一个函数，并且该函数在 tabs.ts 中使用 event.publish 调用事件方法，在 tabs.ts 文件中您可以捕获单击事件，因此在 tabs.ts 中您可以使用 viewchild并在离子中使用选项卡的选择方法

home.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>

home.ts

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

tabs.html

<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>

tabs.ts

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