Question

我试图根据用户的登录状态在根页面中切换菜单，但是不知何故，我所有的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)

如果有人可以找到我的解决方案，将不胜感激。

MenuController无法在离子模式下工作

0 个答案: