ionic2
Uso de pestañas

Observaciones

Cambiar la pestaña seleccionada programáticamente desde la página infantil

Puede echar un vistazo al código completo en este Plunker de trabajo .

En este ejemplo, uso un servicio compartido para manejar la comunicación entre las páginas dentro de la pestaña (páginas secundarias) y el contenedor de pestañas (el componente que contiene las pestañas). Aunque probablemente pueda hacerlo con Eventos, me gusta el enfoque de servicio compartido porque es más fácil de entender y también para mantener cuando la aplicación comienza a crecer.

TabService

import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular/index';
import {Observable} from 'rxjs/Observable';
 
@Injectable()
export class TabService { 
  
  private tabChangeObserver: any;
  public tabChange: any;

  constructor(private platform: Platform){
    this.tabChangeObserver = null;
    this.tabChange = Observable.create(observer => {
        this.tabChangeObserver = observer;
    });
  }
  
  public changeTabInContainerPage(index: number) {
    this.tabChangeObserver.next(index);
  }
}

Básicamente, el TabService solo crea un Observable para permitir que el contenedor de pestañas se suscriba a él, y también declara el método changeTabInContainerPage() que se llamará desde las páginas secundarias.

Luego, en cada página secundaria (las que están dentro de las pestañas) solo agregamos un botón y vinculamos el evento click a un método que llama al servicio:

Página1.html

<ion-content class="has-header">
    <h1>Page 1</h1>
    <button secondary (click)="changeTab()">Select next tab</button>
</ion-content>

Página1.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { TabService } from 'tabService.ts';

@Component({
  templateUrl:"page1.html"
})
export class Page1 {

  constructor(private tabService: TabService) { }

  public changeTab() {
    this.tabService.changeTabInContainerPage(1);
  }
}

Y finalmente, en TabsPage , solo nos suscribimos al servicio, y luego cambiamos la pestaña seleccionada con this.tabRef.select(index);

import { Component, ViewChild } from "@angular/core";
import { Page1 } from './page1.ts';
import { Page2 } from './page2.ts';
import { TabService } from 'tabService.ts'; 

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  constructor(private tabService: TabService){
    this.tabService.tabChange.subscribe((index) => {
      this.tabRef.select(index);
    });
  }
}

Tenga en cuenta que estamos obteniendo una referencia a la instancia de Tabs agregando #myTabs en el elemento ion-tabs , y lo obtenemos del componente con @ViewChild('myTabs') tabRef: Tabs;

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2"></ion-tab>
</ion-tabs>

Cambiar pestaña con selectedIndex

En lugar de obtener una referencia al DOM, simplemente puede cambiar el índice de la pestaña usando el atributo selectedIndex en las iones de las pestañas

HTML:

 <ion-tabs [selectedIndex]="tabIndex" class="tabs-icon-text" primary >
      <ion-tab tabIcon="list-box"   [root]="tabOne"></ion-tab>
      <ion-tab tabIcon="contacts"  [root]="tabTwo"></ion-tab>
      <ion-tab tabIcon="chatboxes"  [tabBadge]="messagesReceived" [root]="tabFive"></ion-tab> 
 </ion-tabs>

TS:

 import { Events} from "ionic-angular";

 export class tabs {
  public tabIndex: number;
  constructor(e: Events) {
    tabs.mySelectedIndex = navParams.data.tabIndex || 0;
    e.subscribe("tab:change", (newIndex) => this.tabIndex = newIndex);
  }
}

Si desea cambiarlo desde otro servicio de controlador, puede enviar un evento:

e.publish("tab:change",2);