Ionic 3侧边菜单异常：setRoot后不显示及Tabs场景登录后无法展开

看起来你遇到的问题主要是菜单状态控制和页面导航栈的层级问题，我来帮你一步步梳理解决方案：

一、先调整页面结构（核心前提） #

首先要确保侧边菜单是整个应用的根容器，Tabs作为菜单初始加载的页面。很多人会犯的错误是把Tabs设为根页面，菜单嵌套在Tabs里，这会导致菜单无法全局控制。

1. 创建菜单根页面（MenuPage） #

模板文件 menu.html

<ion-menu [content]="content" id="main-menu">
  <ion-header>
    <ion-toolbar>
      <ion-title>我的菜单</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="navToPage('profile')">个人中心</button>
      <button ion-item (click)="navToPage('orders')">全部订单</button>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- 这里是菜单的内容容器，所有页面都在这个导航栈里 -->
<ion-nav #content [root]="initialPage"></ion-nav>

逻辑文件 menu.ts

import { Component } from '@angular/core';
import { MenuController, NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';

@Component({
  templateUrl: 'menu.html'
})
export class MenuPage {
  initialPage: any = TabsPage;

  constructor(
    private menuCtrl: MenuController,
    private navCtrl: NavController
  ) {
    // 初始状态禁用菜单
    this.menuCtrl.enable(false, 'main-menu');
  }

  navToPage(pageKey: string) {
    // 根据key跳转对应页面，示例逻辑
    let targetPage;
    switch(pageKey) {
      case 'profile':
        // targetPage = ProfilePage;
        break;
      case 'orders':
        // targetPage = OrderListPage;
        break;
    }
    this.navCtrl.setRoot(targetPage);
  }
}

记得把MenuPage设为应用的根页面（在app.module.ts的rootPage配置里）。

二、处理菜单启用的时机问题 #

你之前在ionViewDidLoad里调用menu.enable(true)无效，是因为这个钩子只在页面第一次创建时触发一次。如果订单汇总页被Ionic缓存了，再次进入不会触发这个钩子，所以改用ionViewWillEnter更可靠——每次页面进入都会执行。

订单汇总页（OrderSummaryPage）的逻辑 #

import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';

@Component({
  templateUrl: 'order-summary.html'
})
export class OrderSummaryPage {

  constructor(private menuCtrl: MenuController) {}

  ionViewWillEnter() {
    // 进入页面时启用指定id的菜单
    this.menuCtrl.enable(true, 'main-menu');
    // 如果需要显示菜单按钮，也可以手动触发
    // this.menuCtrl.toggle(false); // 确保菜单处于关闭状态，只显示图标
  }
}

三、解决setRoot后菜单不显示的问题 #

登录后跳转到订单汇总页时，要确保是在菜单的导航栈内跳转。如果之前是从Tabs页面push到登录页，登录成功后用setRoot时，要确保是调用菜单根页面的导航控制器，而不是登录页自己的导航控制器。

登录页（LoginPage）的跳转逻辑优化 #

import { Component } from '@angular/core';
import { NavController, App } from 'ionic-angular';
import { OrderSummaryPage } from '../order-summary/order-summary';

@Component({
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(
    private navCtrl: NavController,
    private app: App // 注入App获取根导航控制器
  ) {}

  doLogin() {
    // 模拟登录逻辑
    const loginSuccess = true;
    if(loginSuccess) {
      // 使用根导航控制器跳转，确保页面在菜单容器内
      this.app.getRootNav().setRoot(OrderSummaryPage);
    }
  }
}

四、补充几个关键注意点 #

• 菜单ID必须唯一：给菜单设置id属性，启用/禁用时明确指定该ID，避免多个菜单时出现冲突。
• Tabs页面保持菜单禁用：在TabsPage的ionViewWillEnter里可以再加一句this.menuCtrl.enable(false, 'main-menu')，确保回到Tabs时菜单重新禁用。
• 避免嵌套导航栈：不要在Tabs内部再创建独立的导航栈，所有页面跳转都通过菜单的根导航控制器处理。

按照这个结构调整后，应该就能解决菜单显示但无法展开、setRoot后菜单消失的问题了。

内容的提问来源于stack exchange，提问作者Vik