Ionic2每个Tab的一个sidemenu打开相同的sidemenu

Question

在我的ionic2应用程序中，我希望为每个选项卡设置一个sidemenu。这是我试过的。我用ionic start appname tabs --v2来创建基础结构。

然后，我的想法是让home.html和contact.html（由离子cli创建）包含页面的sidemenu。所以我改变了双方的Home.html和contact.html在页面如下文件夹：

<ion-menu [content]="content"> 
    <ion-header> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button menuClose ion-item (click)="openPage(p)"> 
     Page 1 
     </button> 
     <button menuClose ion-item (click)="openPage(p)"> 
     Page 2 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

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

我再改都TS文件（home.ts和contact.ts）包含它自己的rootpage，如下：

rootPage: any = HomeRootPage; // for home.ts 

和

rootPage: any = ContactRootPage; // for contact.ts 

在我HomeRootPage

，我有导航栏像下面：

<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home Root</ion-title> 
    </ion-navbar> 

和我ContactRootPage：

<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contact Root</ion-title> 
    </ion-navbar> 

我然后跑ionic serve。是的，我为每个标签建立了一个sidemenu！ （家庭和联系方式）。

我可以在我的HomeRootPage上切换侧边菜单，但联系人根页面的侧边菜单不起作用！而不是打开联系sidemenu，它打开家庭sidemenu。 （两个菜单切换打开相同的侧边菜单）

你们中的任何人都知道为什么会发生？我可以告诉我的menuToggle命令切换自己的sidemenu？

非常感谢您的帮助提前。 :-)

Answer 1

我可以告诉我的menuToggle命令切换自己的sidemenu吗？

从Ionic Docs：

要通过其ID或侧切换特定菜单，给menuToggle 指令的值。

<button ion-button menuToggle="right">Toggle Right Menu</button>

所以，你可以通过这样的id设置每个菜单尝试：

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

和

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

然后在你的网页：

<ion-navbar> 
    <button ion-button menuToggle="home"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home Root</ion-title> 
    </ion-navbar> 

而且

<ion-navbar> 
    <button ion-button menuToggle="contact"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contact Root</ion-title> 
    </ion-navbar> 

如果还是不能正常工作，或者如果你看到，当你刷卡正在显示错误的菜单，你也可以做到这一点的组件代码：

constructor(private menuCtrl: MenuController, private nav: NavController) { } 

    ionViewDidEnter() { 
    // Use the id to enable/disable the menus 
    this.menuCtrl.enable(true, 'home'); 
    this.menuCtrl.enable(false, 'contact'); 
    }