离子2 - 同时多个菜单（左 - 右） [英] Ionic 2 - Multiple menu at the same time (right - left)

问题描述

情况：

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

I have a working right menu in my Ionic 2 app. I need to add a left menu. I have tried but was unsuccessfull so far. This is my attempt:

代码：

随着此代码正确的菜单正常工作，但它没有出现在左侧菜单中。

With this code the right menu is properly working, but it doesn't appear the left menu.

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');
    }

问题：

我怎样才能有两个菜单 - 左和右 - 同时正常工作？

How can I have two menu - left and right - properly working at the same time?

推荐答案

就像你可以看到这里，您需要添加 side =left和 side =right，如下所示：

Just like you can see here, you need to add side="left" and side="right" like this:

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

和

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

编辑：

感谢 @johnnyfittizio 的评论！我已经做了你在那里提到的改变（如果我忘记了什么，请编辑这个答案）。

Thanks @johnnyfittizio for your comments! I've made the changes you mentioned there (please edit this answer if I forgot something).

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

So basically we just need to add both menus (for instance, in the app.html page) like this:

<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>

然后我们需要在标题中添加两个菜单按钮：

Then we need to add both menu buttons in the header like this:

<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属性，可以切换正确的菜单。

Please notice that each button has the menuToggle="left" or menuToggle="right" property to be able to toggle the proper menu.

这篇关于离子2 - 同时多个菜单（左 - 右）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！