Ionic2変更子ページのselectedIndexプロパティのタブ

Question

私はAngular2とIonic2の初心者です。私はIonic2のTabsコンポーネントを使用して自分の小さなアプリを構築しようとしています。

私の子ページのボタンを使ってタブを変更したいと考えています。私はNavController.setRoot()とNavController.push()を使ってみましたが、それらのどれもが望ましい動作をしていません。

setRoot(Homepage)は正しいビューを設定しますが、タブメニューの選択したタブは変更しません。 push(Homepage)は正しいビューを設定しますが、[タブ]メニューは表示されなくなりました。

私は、私のシングルページからTabsPage（タブを保持している@Component）とどのようにコミュニケーションをとるべきかについて少し混乱します。

ありがとうございます！

Answer 1

まあ、これを行うための簡単な方法があるはずですが、私はそれをこの方法でした：あなたはタブコンポーネントからそれを行う必要がありますアクティブなタブを変更するために、私は共有サービスを使用

のでをの間の通信を処理するにはとタブコンテナ（タブを保持するコンポーネント）。あなたはおそらくEventsでそれを行うことができますが、共有サービスが好きです。なぜなら、アプリケーションが成長し始めるときには理解しやすく、またマンタンになるからです。

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

（タブ内の）各ページに我々は唯一のボタンを追加し、サービスを呼び出す方法にそれをバインド次に

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

} 

、：

Page1.html

<ion-content class="has-header"> 
    <div padding style="text-align: center;"> 
    <h1>Page 1</h1> 

    <button secondary (click)="changeTab()">Select next tab</button> 
    </div> 

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

最後に、タブコンポーネントでは、サービスのメソッドのみをサブスクライブし、次にch ANGE 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;

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