ionic2
Tabs verwenden

Bemerkungen

Ändern Sie die ausgewählte Registerkarte programmgesteuert von der untergeordneten Seite

Sie können den vollständigen Code in diesem funktionierenden Plunker nachlesen .

In diesem Beispiel verwende ich einen gemeinsam genutzten Dienst, um die Kommunikation zwischen den Seiten innerhalb der Registerkarte (untergeordnete Seiten) und dem Registerkartencontainer (der Komponente, die die Registerkarten enthält) zu handhaben. Auch wenn Sie dies mit Events wahrscheinlich tun könnten, gefällt mir der Shared-Service-Ansatz, denn er ist einfacher zu verstehen und auch zu verwalten, wenn die Anwendung wächst.

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

Der TabService erstellt also im TabService nur ein Observable , damit der Tabs-Container ihn abonnieren kann, und deklariert außerdem die changeTabInContainerPage() Methode, die von den changeTabInContainerPage() Seiten aufgerufen wird.

Dann fügen wir auf jeder untergeordneten Seite (die innerhalb der Registerkarten) nur eine Schaltfläche hinzu und binden das click Ereignis an eine Methode, die den Dienst aufruft:

Seite1.html

<ion-content class="has-header">
    <h1>Page 1</h1>
    <button secondary (click)="changeTab()">Select next tab</button>
</ion-content>

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

Und schließlich abonnieren wir in der TabsPage nur den Dienst und ändern dann die ausgewählte Registerkarte mit 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);
    });
  }
}

#myTabs Sie, dass wir einen Verweis auf die Tabs-Instanz erhalten, indem #myTabs im Element ion-tabs #myTabs hinzufügen. Wir erhalten ihn von der Komponente mit @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>

Registerkarte mit selectIndex wechseln

Anstatt einen Verweis auf das DOM zu erhalten, können Sie einfach den Index der Registerkarte mithilfe des selectedIndex-Attributs auf den Ionenregistern ändern

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

Wenn Sie es von einem anderen Controller-Dienst ändern möchten, können Sie ein Ereignis senden:

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