ionic2
タブの使用

備考

子ページからプログラムによって選択したタブを変更する

この作業中のPlunkerで、完全なコードを見ることができます。

この例では、共有サービスを使用して、タブ内のページ（子ページ）とタブコンテナ（タブを保持するコンポーネント）間の通信を処理します。 イベントでそれをやることはできますが、共有サービスのアプローチが好きです。わかりやすく、またアプリケーションの成長が始まるときにも役立つからです。

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

したがって、基本的にTabServiceはObservableを作成して、タブコンテナがそれにサブスクライブできるようにし、子ページから呼び出されるchangeTabInContainerPage()メソッドも宣言します。

次に、各子ページ（タブ内の子ページ）で、ボタンを追加してclickイベントをサービスを呼び出すメソッドにバインドしclick 。

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

最後に、 TabsPageでは、サービスに登録するだけで、選択したタブをthis.tabRef.select(index);で変更します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);
    });
  }
}

ion-tabs要素に#myTabsを追加してTabsインスタンスへの参照を取得していることに注目してください。これは@ViewChild('myTabs') tabRef: Tabs;コンポーネントから取得し@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>

selectedIndexでタブを変更

DOMへの参照を取得する代わりに、イオンタブ上のselectedIndex属性を使用してタブのインデックスを変更することができます

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

他のコントローラサービスから変更したい場合は、イベントを送信することができます：

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