Question

在我的ionic2应用程序中，我希望每个标签都有一个侧面菜单。我试过这里。我使用ionic start appname tabs --v2来创建基础结构。

然后，我的想法是使home.html和contact.html（由离子cli创建）成为包含页面的sidemenu。所以我在pages文件夹中更改了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: 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。是的，我为每个标签建立了一个侧面菜单！（家和联系）。

我可以在我的HomeRootPage上切换侧面菜单，但联系根页面的侧面菜单不起作用！它不是打开联系人侧面菜单，而是打开主页侧面菜单。（两个menuToggle打开相同的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'); }

Ionic2每个Tab的一个侧面菜单打开相同的侧面菜单

1 个答案: