2016-07-15 39 views
2

我是Angular2和Ionic2中的一個初學者。我正在嘗試使用Ionic2的Tabs組件構建自己的小應用程序。Ionic2更改從子頁面tabs selectedIndex屬性

我希望能夠使用我的childpage中的按鈕來更改選項卡。我嘗試過使用NavController.setRoot()NavController.push(),但沒有一個具有所需的行爲。

setRoot(Homepage)設置正確的視圖,但不會更改選項卡菜單中的選定選項卡。 push(Homepage)設置正確的視圖,但Tabs菜單不再可見。

我有點困惑,我應該如何與TabsPage(擁有標籤的@Component)通過我的單頁進行通信。

謝謝!

+0

我把它從組件有同樣的問題。彈出(),推()與標籤只是不按預期工作。 – Mukus

回答

2

嘛,應該有這樣做的更簡單的方法,但我沒有這樣說:

因爲爲了改變激活的標籤,你應該從標籤組件做到這一點,我用了一個共享服務來處理標籤頁內部的頁面之間的通信。標籤容器(包含標籤的組件)。即使您可能可以使用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); 
    } 
} 

最後,在tabs組件中,我們只訂閱服務中的方法,然後我們ch安格與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> 
+0

謝謝,這工作,我有點困惑應該怎麼做,事件。我嘗試過使用[這個例子](https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent),但這裏的TabsPage模板不包含tab指令。 –

+1

這適用於Ionic 2發佈版本。 – Mukus

相關問題