IONIC 2 - 组件选项卡菜单

问题描述：

新的Ionic 2和角2. 试图简单地添加一个标签菜单（组件）我的一些页面。IONIC 2 - 组件选项卡菜单

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>

然后我想将它添加到这个页面：

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>

谁能指教一下我错过了什么？作为菜单不显示

答

在你menu.component.ts没有汇入rootPage，虽然在menu.component.html你指定为所有标签页的根源，例如在你的代码中有：

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

见来自离子团队的this example implementation。

答

每个[根]需要是指一个页面（进口所有在您的主页），像这样：

<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>`

在.TS链接根的各页：

export class Home{ 

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


constructor(public navCtrl: NavController) {} 
}

请参阅Ionic Docs中的组件文档： https://ionicframework.com/docs/components/#tabs https://ionicframework.com/docs/api/components/tabs/Tab/

IONIC 2 - 组件选项卡菜单

相关推荐