1
我跟着離子2菜單文件和我要顯示這樣的菜單： 
離子2菜單過渡
所以菜單顯示的內容頁和菜單按鈕依然顯示如下。
但是當我運行我的應用程序，我得到這個：
的菜單顯示的內容頁面上方和按鈕消失！ 這裏是app.html代碼：
<ion-split-pane>
<ion-menu side="left" id="loggedInMenu" [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose="loggedInMenu" *ngFor="let p of appPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)" ></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- main navigation -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>
</ion-split-pane>
app.componenent.ts：
import { Component, ViewChild } from '@angular/core';
import { Platform,MenuController, Nav, } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { MainPage } from '../pages/main/main';
import { MyDogsPage } from '../pages/my-dogs/my-dogs';
import { MyCoursesPage } from '../pages/my-courses/my-courses';
import { FriendsPage } from '../pages/friends/friends';
import { TrainersPage } from '../pages/trainers/trainers';
import { AuthenticationProvider } from '../providers/authentication/authentication'
export interface PageInterface {
title: string;
component: any;
icon: string;
index?: number;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
appPages: PageInterface[] = [
{ title: 'Account', component: MainPage, index: 0, icon: 'finger-print' },
{ title: 'My Dogs', component: MyDogsPage,index: 1, icon: 'paw' },
{ title: 'My Course', component: MyCoursesPage, index: 2, icon: 'book' },
{ title: 'Friends', component: FriendsPage, index: 3, icon: 'people' },
{ title: 'My Trainers', component: TrainersPage, index: 4, icon: 'man' },
];
rootPage:any;
currentTitle ='';
activePage:any;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public userData: AuthenticationProvider, public menuctrl: MenuController) {
this.rootPage=(localStorage.disableintro? LoginPage:HomePage)
this.userData.hasLoggedIn().then((hasLoggedIn) => {
this.enableMenu(hasLoggedIn === true);
});
this.enableMenu(false);
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
enableMenu(loggedIn: boolean) {
this.menuctrl.enable(loggedIn, 'loggedInMenu');
}
openPage(page) {
let params = {};
console.log('dd');
this.nav.setRoot(page.component, params).catch((err: any) => {
console.log('rr');
console.log(`Didn't set nav root: ${err}`);
});
this.activePage=page;
}
isActive(page: PageInterface) {
let childNav = this.nav.getActiveChildNavs()[0];
// Tabs are a special case because they have their own navigation
if (childNav) {
if (childNav.getSelected()) {
return 'primary';
}
return;
}
if (this.nav.getActive() && this.nav.getActive().name === page.title) {
return 'primary';
}
return;
}
}
一些幫助，請。