html - Ionic 2 在页面组件而不是根组件上定义菜单

Question

我在尝试在我的 Ionic 2 项目中实现一个简单的菜单时遇到了问题。我在网上看到的所有示例都在 app.html 中定义了菜单的 HTML然后只有一个带有 menuToggle 的按钮使用菜单的页面上的标记。

这就是我想要做的。该应用程序的根页面是一种登录页面，称为 HomePage .此页面定义为 rootPage在app.ts如下所示。用户登录后，他们被带到SettlementPage。页。在此页面上，用户应该能够打开一个菜单，该菜单显示用户可以前往的其他定居点的列表。

我的问题是我需要在 SettlementPage 的上下文中定义菜单及其内容, 而不是 HomePage ，这似乎是所有示例的方式。我对如何去做这件事感到困惑，因为关于这个主题的文档不多。具体来说，我对 <ion-nav #mycontent [root]="rootPage"></ion-nav> 这行如何感到困惑运作。这究竟将菜单绑定(bind)到什么？在所有示例中，rootPage是 app.ts 中定义的根组件的成员.我将如何将菜单绑定(bind)到特定的 Page组件？

我的一个想法是我需要将菜单绑定(bind)到 ion-content此特定页面的 HTML 部分。所以，我添加了一个 ID 字段，如 <ion-content id="content">然后尝试用 <ion-menu [content]="content"> 引用它但这似乎没有用。我也尝试设置 this.rootPage = this;在 settlement-page.ts 内但这也没有用。

我想我对菜单应该如何绑定(bind)到页面有一些根本性的误解。是否有可能这样做，或者是否必须在根组件上定义菜单并在其他地方访问引用某种 ID？

下面是我项目中的相关代码，供引用:

app.ts :

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;
  platform: Platform;

  constructor(platform: Platform) {
    this.platform = platform;
    this.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();
    });
  }
}

settlement-page.html :

<ion-navbar *navbar>
  <button menuToggle side="left">
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
    {{settlement.name}}
  </ion-title>
</ion-navbar>

<ion-menu side="left" [content]="mycontent">
  <ion-toolbar>
    <ion-title>Settlements</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let settlement of settlements" 
                       (click)="travelTo(settlement)">
          {{settlement.name}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-content>
  <p>Name: {{player.name}}</p>
  <p>Caps: {{player.caps}}</p>
</ion-content>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

settlement-page.ts :

import {Page, NavController, NavParams, MenuController} from 'ionic-angular';
import {Player} from '../../providers/classes/player';
import {Settlement} from '../../providers/classes/settlement';
import {SettlementService} from '../../providers/services/settlement-service';
import {SqlService} from '../../providers/services/sql-storage-service';

@Page({
    templateUrl: 'build/pages/settlement-page/settlement-page.html',
    providers: [SqlService, SettlementService]
})
export class SettlementPage {
  private nav: NavController;
  private navParams: NavParams;
  private sqlService: SqlService;
  private settlementService: SettlementService;
  private player: Player;
  private settlement: Settlement;
  private settlements: Settlement[];
  private menu: MenuController;

  constructor(nav: NavController, navParams: NavParams, 
              sqlService: SqlService, settlementService: SettlementService,
              menu: MenuController) {
    this.nav = nav;
    this.navParams = navParams;
    this.sqlService = sqlService;
    this.settlementService = settlementService;
    this.menu = menu;

    this.player = navParams.get('player');
    this.settlement = navParams.get('settlement');
    this.settlements = settlementService.getSettlements();
    //don't allow navigation to current settlement
    this.settlements.filter((value: Settlement) => value != this.settlement);
    console.log(this.menu.getMenus());
  }
}

在最后一行，this.menu.getMenus()返回一个空数组，它告诉我我在 settlement-page.html 中定义的菜单未被识别。我不确定我在这里做错了什么。

目前，菜单图标出现在导航栏的左上角，但当我点击它时，一个空白的透明菜单会从左侧滑出。

如有任何建议，我们将不胜感激。我已经坚持了几个小时，网上似乎没有关于在应用程序的根组件之外定义和使用菜单的内容。

Answer 1

我遵循了上面提到的 Manu Valdés 的回答，但不得不为 ionic 2 做一些改变。我所做的是:

在不需要菜单的页面添加:

import { MenuController } from 'ionic-angular';

constructor(public menu:MenuController) {
 ionViewDidLoad() {
    this.menu.enable(false);
  }
  ionViewDidLeave(){
    this.menu.enable(true);
  }
}