typescript - ionic2でメニューを開くことができません

私は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>

ページ1.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();
  }
}

回答 #1

以下の変更をコードに含めてみてください

• app.ts の中の ion-nav に id を含めてください

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

• あなたのメソッド openPage(page) の下記のコードを置き換えてください

  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 から既存のサイドメニューテンプレートをダウンロードして確認してください

ionic start yourProjectName sidemenu --v2 --ts

ionic beta 8の更新情報 TSはViewChildを含めるように編集する必要があります

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