Ionic2 change Tabs selectedIndex Eigenschaft von einer Kindseite

Question

Ich bin ein bisschen Anfänger in Angular2 und Ionic2. Ich versuche, meine eigene kleine App mit Ionics Tabs-Komponente zu erstellen.

Ich möchte in der Lage sein, die Registerkarte mithilfe einer Schaltfläche in meiner untergeordneten Seite zu ändern. Ich habe versucht, NavController.setRoot() und NavController.push() zu verwenden, aber keiner von ihnen hat das gewünschte Verhalten.

setRoot(Homepage) legt die richtige Ansicht fest, ändert jedoch nicht die ausgewählte Registerkarte im Registerkartenmenü. push(Homepage) stellt die korrekte Ansicht ein, aber das Tabs-Menü ist nicht mehr sichtbar.

Ich bin ein wenig verwirrt darüber, wie ich mit den TabsPage (die @ Komponente, die die Registerkarten enthält) von meinen einzelnen Seiten kommunizieren.

Danke!

Answer 1

Nun, sollte es ein einfacherer Weg, dies zu tun, aber ich habe es so aus:

Denn um die aktiven Registerkarte ändern Sie es von der Tabs Komponente tun sollten, habe ich einen Shared Service die Kommunikation zwischen die Seiten innerhalb der Registerkarte und der Registerkarte Container (die Komponente, die die Registerkarten enthält). Auch wenn Sie es wahrscheinlich mit Events tun könnten Ich mag den shared service Ansatz, weil einfacher zu verstehen ist und auch zu halten, wenn die Anwendungen beginnen zu wachsen.

Also im Grunde die TabServices schafft nur ein Observable die Laschen Behälter zu ermöglichen, sie zu abonnieren, und erklärt auch die changeTabInContainerPage() Methode, die von den Registerkarten aufgerufen wird.

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

} 

Dann wird in jeder Seite (im tabs) wir nur eine Taste hinzufügen und binden, die sich auf ein Verfahren, das den Dienst aufruft:

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

Und schließlich, in der tabs-Komponente, abonnieren wir nur die Methode im Dienst, und dann wir ch ange die ausgewählten 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); 
    }); 
    } 
} 

Bitte beachten Sie, dass wir durch das Hinzufügen #myTabs im ion-tabs Elemente einen Verweis auf das Tabs Beispiel wenn es darum gehen, und wir bekommen es 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>