2017-07-26 7 views
1

は、私は、イオン2のメニューのドキュメントを踏襲し、私はこのようなメニューを表示したい: enter image description hereイオン2メニュー遷移

のでメニューがコンテンツページの下に表示され、メニューボタンがまだ表示します。

が、私は私のアプリを実行したとき、私はこの得た:

enter image description here

メニューは、コンテンツページの上に表示され、ボタンが消えます!

<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: はここapp.htmlコードです

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; 
    } 
} 

いくつかの助けてください。

答えて

1

てみてください、あなたの<ion-menu> -elementにtype='revealを追加:

<ion-menu type='reveal' side="left" id="loggedInMenu" [content]="content"> 

docsは言う:
「材料設計とWindowsの両方のモードのデフォルトタイプはoverlay
、そしてrevealは、iOS用のデフォルトのタイプですモード。'

あなたが表示したい結果は、iOSモードで表示されます。結果はMaterial Designモードになります。