Question

情况：

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

问题：

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

Answer 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 的评论！我已经做了你在那里提到的改变（如果我忘记了什么，请编辑这个答案）。

所以基本上我们只需要添加两个菜单（例如，在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"属性，可以切换正确的菜单。

离子2 - 同时多个菜单（左 - 右）

1 个答案: