Ionic 2 - 同时有多个菜单（右 - 左）

Posted 2023-03-13

【中文标题】Ionic 2 - 同时有多个菜单（右 - 左）

【英文标题】：Ionic 2 - Multiple menu at the same time (right - left)

【发布时间】：2017-04-09 16:33:58

【问题描述】：

情况：

我的 Ionic 2 应用程序中有一个正常工作的菜单。我需要添加一个左侧菜单。 我已经尝试过，但到目前为止还没有成功。 这是我的尝试：

代码：

使用此代码，右侧菜单可以正常工作，但左侧菜单不显示。

app.html：

<ion-menu [content]="content" id="menu1">

    <ion-header>
        <ion-toolbar>
            <ion-title>Pages</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
                p.title
            </button>
        </ion-list>
    </ion-content>

</ion-menu>


<ion-menu [content]="content" id="menu2">

  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>Menu 2</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts：

constructor(
        public platform: Platform,
        public menu: MenuController
    ) 
        this.initializeApp();

        this.pages = [
             title: 'Home', component: HomePage ,
             title: 'Login', component: LoginPage ,
        ];

        this.menu.enable(true, 'menu1');
        this.menu.enable(true, 'menu2');
    

问题：

如何让两个菜单（左右菜单）同时正常工作？

【参考方案1】：

就像你可以看到here一样，你需要像这样添加side="left"和side="right"：

<ion-menu [content]="content" side="left" id="menu1">...</ion-menu>

和

<ion-menu [content]="content" side="right" id="menu2">...</ion-menu>

编辑：

感谢 @johnnyfittizio 您的 cmets！我已经进行了您在此处提到的更改（如果我忘记了什么，请编辑此答案）。

所以基本上我们只需要像这样添加两个菜单（例如，在app.html 页面中）：

<ion-menu [content]="content" side="left" id="menu1">
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">
  <ion-content>
    <ion-list>
      <button ion-item  menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>



<ion-nav [root]="rootPage" #content></ion-nav>

然后我们需要在标题中添加两个菜单按钮，如下所示：

<ion-header>
  <ion-navbar primary>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Home page</p>

</ion-content>

请注意，每个按钮都有menuToggle="left" 或menuToggle="right" 属性，以便能够切换正确的菜单。

【讨论】：

感谢您的回复。不幸的是，它还没有工作。或许还有别的？

是的！单击右侧按钮会出现右侧菜单。所以唯一的问题是我在标题中看不到正确的菜单图标。你知道这是为什么吗？

是的，我解决了这个问题！您能否编辑您的答案，请在视图的两个按钮中包含 ion-button 指令。否则，这两个按钮就没有正确的样式和定位。现在一切正常！

对不起 :) 又是我。我注意到两件事。 1. this.menu.enable 无关紧要。没有它，一切都很好。所以甚至不需要在页面组件中加载 MenuController。 2. 在页面视图中，我必须将菜单的 ion-toolbar 包装在 中以具有正确的样式。否则我的菜单内容有一些边缘问题。源码解决方案：forum.ionicframework.com/t/…

太棒了，伙计！我是 Ionic2 的新手，有很多事情对我来说远非显而易见。我们确实需要 id="menu1" 和 id="menu2"。为了让正确的 menuClose="menu1" menuClose="menu2" 正常工作。