ionic2
タブの使用
サーチ…
備考
最新の変更と更新を知るために、 Ionic 2 Tabのドキュメントをチェックしてください。
子ページからプログラムによって選択したタブを変更する
この作業中の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);