Ionic 2定义页面组件上的菜单而不是根组件

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

这就是我想要做的 . 该应用程序的根页面是一个名为 HomePage 的各种登录页面 . 此页面在 app.ts 中定义为 rootPage ，如下所示 . 用户登录后，会将其带到 SettlementPage 页面 . 在此页面上，用户应该能够打开一个菜单，显示用户可以前往的其他结算清单 .

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

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

我认为我对如何将菜单绑定到Pages有一些基本的误解 . 甚至可以这样做，还是必须在根组件上定义菜单并在别处引用某种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 中定义的菜单未被识别 . 我在这里做错了.2671320_

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

任何建议将不胜感激 . 我现在已经坚持了几个小时，似乎没有任何关于定义和使用应用程序根组件之外的菜单的信息 .