IONIC 2 - Komponente Registerkarte Menü

Question

Neu bei Ionic 2 und Angular 2. Der Versuch, ein Tab-Menü (Komponente) zu einigen meiner Seiten hinzuzufügen.

menu.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'menu', 
    templateUrl: './menu.component.html' 
}) 
export class MenuComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { } 
} 

menu.component.html

<ion-tabs class="tabs-icon-text" [color]="isAndroid ? 'royal' : 'primary'"> 
     <ion-tab tabIcon="water" tabTitle="Water" [root]="rootPage"></ion-tab> 
     <ion-tab tabIcon="leaf" tabTitle="Life" [root]="rootPage"></ion-tab> 
     <ion-tab tabIcon="flame" tabTitle="Fire" [root]="rootPage"></ion-tab> 
     <ion-tab tabIcon="magnet" tabTitle="Force" [root]="rootPage"></ion-tab> 
    </ion-tabs> 

Dann will ich es auf dieser Seite hinzuzufügen:

home.ts

import { MenuComponent } from "../../app/Componets/Menu/menu.component"; 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage implements OnInit { 


    constructor(
    public navCtrl: NavController 

) { 

    } 

    navigation: string = "Apps"; 

    ngOnInit() { 
    this.getData(); 
    } 

}

home.html

//html.... 
<ion-content padding> 
<menu></menu> 

</ion-content> 

Kann jemand raten, was ich verpasst haben? wie das Menü nicht

In Ihrem

Answer 1

nicht angezeigt menu.component.ts Sie haben nicht rootPage importiert, obwohl in menu.component.html Sie es als die Wurzel allen Registerkarten angeben, zum Beispiel in Ihrem Code Sie haben:

<ion-tab tabIcon="water" tabTitle="Water" [root]="rootPage"></ion-tab> 

See this example implementation vom ionischen Team.

Answer 2

Jeder [root] müssen (alle, die Seiten in Ihrem Hause Import), wie diese eine Seite verweisen:

<ion-tabs> 
     <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1"></ion-tab> 
     <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab2"></ion-tab> 
     <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab3"></ion-tab> 
     <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab4"></ion-tab> 
     </ion-tabs>` 

In dem .ts die Wurzel des Link auf den Seiten:

export class Home{ 

tab1Root = tab1; 
tab2Root = tab2; 
tab3Root = tab3; 
tab4Root = tab4; 


constructor(public navCtrl: NavController) {} 
} 

Siehe das Komponentendokument in Ionic Docs: https://ionicframework.com/docs/components/#tabs https://ionicframework.com/docs/api/components/tabs/Tab/