ionic2
Använda flikar

Anmärkningar

Ändra vald flik programatiskt från barnsidan

Du kan titta på hela koden i den här fungerande Plunkeren .

I det här exemplet använder jag en delad tjänst för att hantera kommunikationen mellan sidorna i fliken (underordnade sidor) och flikbehållaren (komponenten som innehåller flikarna). Även om du förmodligen skulle kunna göra det med händelser gillar jag den delade tjänsten för att det är lättare att förstå och också att hantera när applikationen börjar växa.

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

Så i grunden skapar TabService bara en Observable att låta flikbehållaren prenumerera på den och förklarar också changeTabInContainerPage() som kommer att anropas från barnsidorna.

Sedan lägger vi bara till en knapp på varje underordnad sida (de som finns i flikarna) och binder click till en metod som kallar tjänsten:

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

Och till slut, på TabsPage , prenumererar vi bara tjänsten och sedan ändrar vi den valda fliken med 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);
    });
  }
}

Observera att vi får en referens till Tabs-instansen genom att lägga till #myTabs i #myTabs ion-tabs , och vi får det från komponenten med @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>

Ändra fliken med valdIndex

Istället för att få en referens till DOM kan du helt enkelt ändra flikens index med det valdaIndex-attributet på jon-flikarna

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

Om du vill ändra den från någon annan kontrolltjänst kan du skicka en händelse:

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