Question

我正在尝试在Ionic2的页面上创建2个菜单

app.html

    <ion-menu [content]="content" side="right" 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="left" 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 swipeBackEnabled="false"></ion-nav>

您好-ionic.html：

    <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <p>
    <button ion-button color="secondary" menuToggle="left">Toggle Main Menu</button>
  </p>
  <p>
    <button ion-button color="primary" menuToggle="right">Toggle Menu</button>
  </p>
</ion-content>

我面临的问题是只有menu2正在运行，menu1没有出现。如果我删除menu2而不是menu1正在运行。

请帮忙

Answer 1

我也有像你这样的问题我的解决方案是

文件app.html编辑如：

<ion-menu [content]="content" side="left" id="menu1">
   This is menu 1 
</ion-menu>
<ion-menu [content]="content" side="right" type="overlay" id="menu2">  
   This is menu 2
</ion-menu>
<ion-nav [root]="rootPage" [rootParams]="rootParams" #content swipeBackEnabled="false"></ion-nav>

档案app.component.ts

add in constructor() {
   ...
   this.menu.enable(true, 'menu1');
   this.menu.enable(true, 'menu2');
}

使用： PAGE.html

<ion-header>
  <ion-navbar color="mytheme">
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>PAGENAME</ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="star"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

祝你成功：））））））））

同一页面上的多个侧面菜单无法工作Ionic2

1 个答案: