ionic2
Utilisation des onglets

Remarques

Modifier l'onglet sélectionné par programme à partir de la page enfant

Vous pouvez consulter le code complet de ce Plunker fonctionnel .

Dans cet exemple, j'utilise un service partagé pour gérer la communication entre les pages de l'onglet (pages enfants) et le conteneur d'onglets (composant contenant les onglets). Même si vous pouvez probablement le faire avec Events, j'aime l'approche de service partagé car elle est plus facile à comprendre et à maintenir lorsque l'application se développe.

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

Ainsi, le TabService crée uniquement un Observable pour permettre au conteneur d'onglets de s'y abonner, et déclare également la méthode changeTabInContainerPage() qui sera appelée à partir des pages enfants.

Ensuite, dans chaque page enfant (celle à l'intérieur des onglets), nous ajoutons un bouton et lions l'événement click à une méthode qui appelle le service:

Page1.html

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

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

Et enfin, dans TabsPage , nous ne sommes abonnés qu'au service, puis nous modifions l'onglet sélectionné avec 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);
    });
  }
}

Notez que nous obtenons une référence à l'instance Tabs en ajoutant #myTabs dans l'élément ion-tabs , et que nous l'obtenons depuis le composant avec @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>

Onglet Modifier avec selectedIndex

Au lieu d'obtenir une référence au DOM, vous pouvez simplement modifier l'index de l'onglet en utilisant l'attribut selectedIndex sur les onglets ion

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 vous souhaitez le modifier depuis un autre service de contrôleur, vous pouvez envoyer un événement:

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