Warum gehen Tabs nach Klick auf das Seitenmenü verloren?

Question

Ich starte mein Projekt mit Tabs-Vorlage und dann füge ich Side-Menü hinein. Beide Registerkarten und Seitenmenü funktionieren, aber wenn ich auf Menüpunkt, Seite verlorene Registerkarten klicken.

app.components.ts

@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage = TabsPage; 

    pages: Array<{title: string, component: any}>; 

    constructor(public platform: Platform) { 

    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Home', component: HomePage }, 
     { title: 'About', component: AboutPage }, 
     { title: 'Contact', component: ContactPage } 
    ]; 
    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 

app.html

<ion-menu [content]="content" push persistent=true> 
    <ion-header> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content class="outer-content"> 
    <ion-list> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     {{p.title}} 
     </button> 
    </ion-list> 
    </ion-content>  
</ion-menu>  
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

Answer 1

Das Problem ist, dass Sie die Komponente aus dem Menü als root ausgewählt setzen.

this.nav.setRoot(page.component); 

Diese ersetzt die vorhandene TabsPage mit der ausgewählten Seite als root anstatt die Registerkarte des TabsPage ausgewählt ändern.

Eine Lösung ist das Senden des Seitenobjekts von openPage() Funktion zu TabsPage mit Events API oder einen Dienst mit Observable/Subject.

openPage(page) { 

    this.events.publish('menu selected',page); 

    } 

In Ihrem TabsPage fand

ngOnInit(){ 
this.events.subscribe('menu selected',this.openPage.bind(this)) 
} 
openPage(page){ 

    this.tabs.select(page.index);//set an additional property with index same as tab order. 
}