IONIC 2-组件选项卡菜单 [英] IONIC 2 - Component Tab Menu

问题描述

Ionic 2和Angular 2的新功能. 试图简单地向我的某些页面添加一个标签菜单(组件).

New to Ionic 2 and Angular 2. Trying to simply add a tab menu (component) to some of my pages.

menu.component.ts

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

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>

然后我要将其添加到此页面:

Then I want to add it to this page :

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

home.html

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

</ion-content>

有人可以告诉我我错过了什么吗?因为菜单不显示

Can anyone advise what I have missed? as the menu does not display

推荐答案

每个[root]都需要引用一个页面(将所有这些页面导入您的家中)，如下所示:

Each [root] need refer a page ( import all that pages in your home ), like this:

<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链接中，将根目录链接到页面:

In the .ts link the root's to the pages:

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/

See the components document in Ionic Docs: https://ionicframework.com/docs/components/#tabs https://ionicframework.com/docs/api/components/tabs/Tab/

这篇关于IONIC 2-组件选项卡菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！