從子頁面以程式設計方式更改選定的選項卡

你可以檢視這個有效的 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 來允許 tabs 容器訂閱它，並且還宣告瞭將從子頁面呼叫的 changeTabInContainerPage() 方法。

然後，在每個子頁面（選項卡內部）中，我們只新增一個按鈕並將 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); 更改所選的選項卡

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>