我在尝试在我的Ionic 2项目中实现简单菜单时遇到问题。我在网上看到的所有示例都定义了app.html内的菜单的HTML，然后在使用该菜单的页面上只有一个带有menuToggle标记的按钮。离子2定义页面组件上的菜单而不是根组件
这是我正在做的。该应用的根页面是一个登录页面，称为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;，但那也不起作用。
我想我对菜单应该如何绑定到页面有一些基本的误解。甚至有可能这样做，还是必须在根组件上定义一个菜单，并在其他地方引用某种类型的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中定义的菜单没有被识别。我不确定我在这里做错了什么。
目前，菜单图标出现在导航栏的左上角，但是当我点击它时，一个空白的透明菜单从左侧滑出。
任何意见将不胜感激。我一直坚持这几个小时，似乎没有任何关于定义和使用应用程序根组件之外的菜单的信息。