离子手动更改标签页

Question

我有一个标签页，里面有五个标签，我知道我可以点击相应标签图标更改导航到这些页面，但是我想用第一个标签页里面的按钮手动更改它，当我点击这个按钮，我可以进入第二个标签页，我该怎么办？

Answer 1

您可以使用代码。这里我要做的是当从tab1点击按钮时我们调用ts中的一个函数和tabs.ts中的函数调用事件方法使用event.publish并在tabs.ts文件中你可以捕获clicked事件所以在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']);
        });
    }
}