Question

我是ionic2和TypeScript的新手。

我的问题是如何在ionic2中打开菜单？

按第1页的菜单图标时，以下代码无效。我在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

尝试在代码中包含以下更改

在app.ts内的ion-nav中包含id

 <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下载现有的sidemenu模板并检查

ionic start yourProjectName sidemenu --v2 --ts

离子β8更新 必须通过包含ViewChild

来编辑TS

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

无法在ionic2中打开菜单

1 个答案: