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

推荐答案

就像你看到的here，需要添加 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.

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