IONIC 2 - 组件选项卡菜单答案

【问题标题】：IONIC 2 - Component Tab MenuIONIC 2 - 组件选项卡菜单
【发布时间】：2017-06-17 15:06:40
【问题描述】：

Ionic 2 和 Angular 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>

谁能告诉我错过了什么？因为菜单不显示

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案1】：

每个 [root] 都需要引用一个页面（导入您家中的所有页面），如下所示：

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

【讨论】：

【解决方案2】：

在您的 menu.component.ts 中，您尚未导入 rootPage，尽管在 menu.component.html 中您将其指定为所有选项卡的根，例如在您的代码中：

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

请参阅 ionic 团队的 this example implementation。

【讨论】：