Question

我正在Ionic 2中构建一个标签式应用程序，它有五个标签，一个是主页。标签工作正常。我正在尝试为主页以外的每个标签页添加菜单。我已经复制并为主页中的4个页面中的每个页面添加了以下代码，只是更改了菜单ID; s和内容ID。一切正常，第一页我访问后续页面我访问只是不做任何事情。我认为这很简单，但已经花了几天时间寻找解决方案。文档仅涉及一页上的不同菜单，而不是几页上的不同菜单。新手所以猜它很简单。请帮助。

public int X 
{
    get 
    {
        return _x;
    }
    set
    {
        _x = value;
    }
}

Answer 1

这有点令人困惑，但您需要将所有菜单添加到应用程序组件 - 而不是任何子页面 - 然后使用MenuController从子页面中引用您需要的任何菜单。在某些情况下，您可能需要在子页面上禁用/启用菜单，但取决于具体情况。有关详细信息，请查看http://ionicframework.com/docs/api/components/app/MenuController/和“同一侧的多个菜单”和“不同侧面的多个菜单”。

一个例子：

<!-- Menu 1 -->
<ion-menu id="menu-one" [content]="nav">
  <ion-header>
    <ion-navbar>
      <ion-title>Menu 1</ion-title>  
    </ion-navbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item (click)="doSomething()" menuClose>
        Item 1
      </ion-item>
      <ion-item (click)="doSomething()" menuClose>
        Item 2
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Menu 2 -->
<ion-menu id="menu-two" [content]="nav">
  <ion-header>
    <ion-navbar>
      <ion-title>Menu 2</ion-title>  
    </ion-navbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item (click)="doSomething()" menuClose>
        Item 1
      </ion-item>
      <ion-item (click)="doSomething()" menuClose>
        Item 2
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #nav [root]="rootPage"></ion-nav>

在子页面上：

import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';

@Component({
  selector: 'sub-page',
  templateUrl: 'sub-page.html'
})
export class SubPage {

  constructor(public menuCtrl: MenuController) {
    // menuCtrl.enable(false, 'menu-one');
    menuCtrl.enable(true, 'menu-two');    
  }

  toggleMenu() {
    this.menuCtrl.toggle();
  }
}

问题是doSomething（）方法需要在app组件上，而不是子页面组件。

Ionic 2多页上的多个菜单不起作用

1 个答案: