ionic2
Tabbladen gebruiken

Opmerkingen

Wijzig het geselecteerde tabblad programmatisch van de onderliggende pagina

Je kunt de volledige code bekijken in deze werkende Plunker .

In dit voorbeeld gebruik ik een gedeelde service om de communicatie tussen de pagina's binnen het tabblad (onderliggende pagina's) en de tabcontainer (het onderdeel dat de tabbladen bevat) af te handelen. Hoewel je het waarschijnlijk met Evenementen zou kunnen doen, vind ik de shared service-aanpak leuk, omdat het gemakkelijker te begrijpen is en ook te onderhouden is wanneer de applicatie begint te groeien.

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

Dus eigenlijk de TabService creëert slechts een Observable om de tabs container moet abonneren, en verklaart ook de changeTabInContainerPage() methode die zal worden aangeroepen vanuit de onderliggende pagina's.

Vervolgens voegen we op elke onderliggende pagina (die op de tabbladen) alleen een knop toe en binden de click gebeurtenis aan een methode die de service aanroept:

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

En ten slotte, in de TabsPage , abonneren we ons alleen op de service, en dan veranderen we het geselecteerde tabblad met 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);
    });
  }
}

Merk op dat we een verwijzing naar de instantie Tabs krijgen door #myTabs toe te #myTabs aan het element ion-tabs , en we halen het uit de component met @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>

Wijzig het tabblad met geselecteerde index

In plaats van een verwijzing naar de DOM te krijgen, kunt u eenvoudig de index van het tabblad wijzigen met behulp van het kenmerk geselecteerdeIndex op de ionentabs

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

Als u het van een andere controller-service wilt wijzigen, kunt u een gebeurtenis verzenden:

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