無法在ionic2中打開菜單

Question

我是ionic2和TypeScript的新手。

我的問題是如何打開ionic2菜單？

當我按下page1中的菜單圖標時，以下代碼不起作用。 而我在page1.ts中嘗試app.getComponent('leftMenu').enable(true);，但是當我運行該應用程序時，頁面變爲空白屏幕。

有沒有人給我任何建議或提示？

page1.html

<ion-navbar *navbar> 
    <button menuToggle="leftMenu"> 
    <ion-icon name='menu'></ion-icon> 
    </button> 
    <ion-title>Page 1</ion-title> 
</ion-navbar> 

<ion-content padding class="page1"> 
    <h2>Welcome to Ionic!</h2> 
</ion-content> 

page1.ts

import {IonicApp, Page} from 'ionic-angular'; 


@Page({ 
    templateUrl: 'build/pages/page1/page1.html', 
}) 
export class Page1 { 
    constructor(app: IonicApp) { 
    //app.getComponent('leftMenu').enable(true); <- screen becomes blank. 
    } 
} 

app.ts

import {App, IonicApp, Platform, MenuController} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {Page1} from './pages/page1/page1'; 
import {Page2} from './pages/page2/page2'; 


@App({ 
    template: ` 
    <ion-menu [content]="content" id="leftMenu" side="left"> 
     <ion-toolbar> 
     <ion-title>Pages</ion-title> 
     </ion-toolbar> 
     <ion-content> 
     <ion-list> 
      <button ion-item (click)="openPage(page1)"> 
      Page1 
      </button> 
      <button ion-item (click)="openPage(page2)"> 
      Page2 
      </button> 
     </ion-list> 
     </ion-content> 
    </ion-menu> 
    <ion-nav [root]="rootPage"></ion-nav>`, 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    rootPage: any = Page1; 
    page1: any = Page1; 
    page2: any = Page2; 
    constructor(
    platform: Platform, 
    private menu: MenuController, 
    private app: IonicApp 
) { 
    this.menu = menu; 
    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(); 
    }); 
    } 

    openPage(page) { 
    // Reset the nav controller to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.rootPage = page; 

    // close the menu when clicking a link from the menu 
    this.menu.close(); 
    } 
} 

Answer 1

嘗試，包括在你的代碼下面的變化

• 包括ID在你離子導航裏面app.ts

  <ion-nav id='nav' [root]="rootPage"></ion-nav> 
  

• 在你的方法openPage替換下面的代碼（頁）

  openPage(page) { 
       //Get the menu navigation component 
      let nav = this.app.getComponent('nav'); 
      this.menu.close(); 
       //set the navigation root page as the page choosed 
      nav.setRoot(page); 
  } 
  

如果問題仍然存在，下載現有的離子模式和檢查模式

ionic start yourProjectName sidemenu --v2 --ts 

UPDATE對離子公測8個 TS必須由包括ViewChild

import {ViewChild} from '@angular/core'; 
class MyApp { 
    @ViewChild(Nav) nav: Nav; 
    openPage(page) { 
     this.nav.setRoot(page); 
    } 
}