离子菜单显示,但内容不呈现

时间:2017-10-22 01:50:19

标签: angularjs ionic-framework ionic3

我正在开发一款Ionic 3应用,使用PageInterface来显示页面。用户登录后,菜单将在页面上呈现,但不显示任何内容。

我期待2个菜单项:见解,帐户,桶。

当我在Ionic实验室查看我的代码时,似乎空间被用于装饰物品,但没有任何东西存在。

以下是我的代码,任何帮助表示赞赏。

menu.html     

  <ion-header>

    <ion-navbar>
      <ion-title>menu</ion-title>
    </ion-navbar>

  </ion-header>


  <ion-content>
    <ion-list>
      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon item-start [name]="p.ionc" [color]="isActive(p)">
        </ion-icon>
        {{ p.title }}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

menu.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Nav } from 'ionic-angular';

export interface PageInterface {
  title: string;
  pageName: string;
  tabComponent?: any;
  index?: number;
  icon: string;
}

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {

  rootPage = 'TabsPage';

  @ViewChild(Nav) nav: Nav;

  pages: PageInterface[] = [
    {title: 'Home', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon: 'home'},
    {title: 'Accounts', pageName: 'TabsPage', tabComponent: 'AccountsPage', index: 1, icon: 'compass'},
    {title: 'Buckets', pageName: 'TabsPage', tabComponent: 'BucketsPage', index: 2, icon: 'beaker'},
    {title: 'Insights', pageName: 'TabsPage', tabComponent: 'InsightsPage', index: 3, icon: 'analytics'},
    {title: 'Notification', pageName: 'TabsPage', tabComponent: 'NotificationsPage', index: 4, icon: 'notification'},
  ]

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  openPage(page: PageInterface) {
    let params = {};
    if(page.index) {
      params = {tabIndex: page.index};
    }

    if(this.nav.getActiveChildNav() && page.index != undefined) {
      this.nav.getActiveChildNav().select(page.index);
    }
    else {
      this.nav.setRoot(page.pageName, params)
    }
  }

  isActive(page: PageInterface) {
    let childNav = this.nav.getActiveChildNav();

    if(childNav) {
      if(childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }
    if(this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';
    }
  }
}

0 个答案:

没有答案