我正在开发一款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';
}
}
}