Question

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>

任何人都可以告诉我错过了什么吗？因为菜单不显示

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

Answer 2

在您导致menu.component.ts的{{1}}中，虽然在rootPage中您将其指定为所有标签的根目录，例如您的代码中包含： / p>

menu.component.html

请参阅离子团队的this example implementation。

IONIC 2 - 组件选项卡菜单

2 个答案: