我在嘗試在我的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中定義的菜單沒有被識別。我不確定我在這裏做錯了什麼。
目前，菜單圖標出現在導航欄的左上角，但是當我點擊它時，一個空白的透明菜單從左側滑出。
任何意見將不勝感激。我一直堅持這幾個小時，似乎沒有任何關於定義和使用應用程序根組件之外的菜單的信息。