Ionic 2 在页面组件而不是根组件上定义菜单

Posted 2023-03-13

【中文标题】Ionic 2 在页面组件而不是根组件上定义菜单

【英文标题】：Ionic 2 define menu on page component instead of root component

【发布时间】：2016-09-30 01:17:18

【问题描述】：

尝试在 Ionic 2 项目中实现简单菜单时遇到问题。我在网上看到的所有示例都为app.html 中的菜单定义了HTML，然后在使用菜单的页面上只有一个带有menuToggle 标记的按钮。

这就是我想要做的。该应用程序的根页面是一个登录页面，称为HomePage。此页面在app.ts 中定义为rootPage，如下所示。用户登录后，他们会被带到SettlementPage 页面。在此页面上，用户应该能够打开一个菜单，该菜单显示用户可以前往的其他定居点的列表。

我的问题是我需要在SettlementPage 的上下文中定义菜单及其内容，而不是HomePage，这似乎是所有示例的方式。我对如何执行此操作感到困惑，因为关于该主题的文档不多。具体来说，我对<ion-nav #mycontent [root]="rootPage"></ion-nav> 行的运作方式感到困惑。这究竟将菜单绑定到什么？在所有示例中，rootPage 是app.ts 中定义的根组件的成员。如何将菜单绑定到特定的 Page 组件？

我的一个想法是我需要将菜单绑定到这个特定页面的 HTML 的 ion-content 部分。所以，我在<ion-content id="content"> 中添加了一个ID 字段，然后尝试用<ion-menu [content]="content"> 引用它，但这似乎不起作用。我还尝试在settlement-page.ts 中设置this.rootPage = this;，但这也不起作用。

我认为我对菜单应该如何绑定到 Pages 有某种基本的误解。是否有可能做到这一点，或者是否必须在根组件上定义一个菜单并在其他地方引用某种 ID 访问？

这是我项目中的相关代码供参考：

app.ts:

import App, Platform from 'ionic-angular';
import StatusBar from 'ionic-native';
import HomePage from './pages/home/home';

@App(
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config:  // http://ionicframework.com/docs/v2/api/config/Config/
)
export class MyApp 
  rootPage: any = HomePage;
  platform: Platform;

  constructor(platform: Platform) 
    this.platform = platform;
    this.platform.ready().then(() => 
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    );
  

settlement-page.html:

<ion-navbar *navbar>
  <button menuToggle side="left">
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
    settlement.name
  </ion-title>
</ion-navbar>

<ion-menu side="left" [content]="mycontent">
  <ion-toolbar>
    <ion-title>Settlements</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let settlement of settlements" 
                       (click)="travelTo(settlement)">
          settlement.name
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-content>
  <p>Name: player.name</p>
  <p>Caps: player.caps</p>
</ion-content>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

settlement-page.ts:

import Page, NavController, NavParams, MenuController from 'ionic-angular';
import Player from '../../providers/classes/player';
import Settlement from '../../providers/classes/settlement';
import SettlementService from '../../providers/services/settlement-service';
import SqlService from '../../providers/services/sql-storage-service';

@Page(
    templateUrl: 'build/pages/settlement-page/settlement-page.html',
    providers: [SqlService, SettlementService]
)
export class SettlementPage 
  private nav: NavController;
  private navParams: NavParams;
  private sqlService: SqlService;
  private settlementService: SettlementService;
  private player: Player;
  private settlement: Settlement;
  private settlements: Settlement[];
  private menu: MenuController;

  constructor(nav: NavController, navParams: NavParams, 
              sqlService: SqlService, settlementService: SettlementService,
              menu: MenuController) 
    this.nav = nav;
    this.navParams = navParams;
    this.sqlService = sqlService;
    this.settlementService = settlementService;
    this.menu = menu;

    this.player = navParams.get('player');
    this.settlement = navParams.get('settlement');
    this.settlements = settlementService.getSettlements();
    //don't allow navigation to current settlement
    this.settlements.filter((value: Settlement) => value != this.settlement);
    console.log(this.menu.getMenus());
  

在最后一行，this.menu.getMenus() 返回一个空数组，这告诉我我在settlement-page.html 中定义的菜单未被识别。我不确定我在这里做错了什么。

目前，菜单图标出现在导航栏的左上角，但是当我单击它时，会从左侧滑出一个空白的透明菜单。

任何建议将不胜感激。我已经坚持了几个小时了，网上似乎没有关于定义和使用应用程序根组件之外的菜单的内容。

【问题讨论】：

这个问题你解决了吗？如果是，请分享答案

【参考方案1】：

如果您最终想要做的是先有一个无菜单屏幕，然后进入启用菜单的页面，只需将所有内容保留为默认值，不要进行奇怪的绑定，只需禁用主页中的菜单，@987654321 @

然后在同一主页的生命周期方法onPageDidLeave 上，重新启用菜单，以便继续使用它

【参考方案2】：

我遵循上述 Manu Valdés 的回答，但不得不为 ionic 2 进行一些更改。我所做的是：

添加到不需要菜单的页面：

import  MenuController  from 'ionic-angular';

constructor(public menu:MenuController) 
 ionViewDidLoad() 
    this.menu.enable(false);
  
  ionViewDidLeave()
    this.menu.enable(true);