我试图根据用户的登录状态在根页面中切换菜单,但是不知何故,我所有的MenuController方法都无法正常工作。
home.html
<!-- logged out menu -->
<ion-menu id="loggedOutMenu" [content]="content" >
<ion-header>
</ion-header>
<ion-content>
...
</ion-content>
</ion-menu>
<!-- logged in menu -->
<ion-menu id="loggedInMenu" [content]="content" >
<ion-header>
</ion-header>
<ion-content>
<ion-header>
</ion-header>
<ion-content>
...
</ion-content>
</ion-content>
</ion-menu>
<!-- main navigation -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
home.ts
constructor(public navCtrl: NavController,
public navParams: NavParams,
public events: Events,
public menu: MenuController,
public userService: UserServiceProvider,
public alertCtrl: AlertController,
public fbService: FacebookLoginServiceProvider,
public djangoService: LoginServiceProvider,
public platform: Platform) {
this.platform.ready().then(()=>{
console.log();
this.enableMenu(this.userService.isLoggedIn);
});
this.listenToLoginEvents();
}
enableMenu(loggedIn: boolean) {
console.log('enable menu');
console.log(this.menu.getMenus());
console.log(this.menu.getMenus()[0]);
console.log(this.menu.getOpen());
this.menu.enable(loggedIn, 'loggedInMenu');
this.menu.enable(!loggedIn, 'loggedOutMenu');
}
listenToLoginEvents() {
this.events.subscribe('userLogin', () => {
this.enableMenu(true);
});
this.events.subscribe('userSignup', () => {
this.enableMenu(true);
});
this.events.subscribe('userLogout', () => {
this.enableMenu(false);
});
}
行为:“我的已注销”菜单仍然显示,并且按钮正常工作,但是
console.log(this.menu.getMenus()[0]);
console.log(this.menu.getOpen());
console.log(this.menu.get('loggedInMenu');
全部返回null,以便预期的menu.enable无法正常工作,并且用户登录后菜单也不会切换。但是,令人惊讶的是,this.menu.getMenus()仍然返回包含2个元素的数组! Chrome调试器工具上的console.log msg结果如下。
[]
0
:
Menu {_menuCtrl: MenuController, _elementRef: ElementRef, _config: Config, _plt: Platform, _renderer: RendererAdapter, …}
1
:
Menu {_menuCtrl: MenuController, _elementRef: ElementRef, _config: Config, _plt: Platform, _renderer: RendererAdapter, …}
length
:
2
__proto__
:
Array(0)
如果有人可以找到我的解决方案,将不胜感激。