Question

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

这是我想要做的。该应用程序的根页面是一个名为HomePage的各种登录页面。此页面在rootPage中定义为app.ts，如下所示。用户登录后，会将其带到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">引用它，但这似乎不起作用。我还尝试在this.rootPage = this;内设置settlement-page.ts，但这也不起作用。

我认为我对如何将菜单绑定到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中定义的菜单未被识别。我不确定我在这里做错了什么。

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

非常感谢任何建议。我已经被困在这几个小时了，似乎没有任何关于定义和使用应用程序根组件之外的菜单的信息。

Answer 1

我按照上面提到的ManuValdés的回答但不得不改变离子2的含义。我做的是：

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

fs = 5000; %sampling frequency in Hz
fc = 1000; %Carrier function's sampling Frequency
duration = 2; %signal duration in seconds
t = linspace(0,2,duration*fs); %create time axis


x = 2*cos(20*t);
fDev = 50;
modx = fmmod(x,fc,fs, fDev);
demodx = fmdemod(modx, fc, fs);
%Time domain plots
subplot(3,1,1)
plot(t,x) %plot our first graph
title('Time Domain Signal')
xlabel('time (s)')
xlim([0 2])
ylim([-2 2])

subplot(3,1,2)
plot(t,modx) %plot modulated graph
title('Frequency Modulated Signal')
xlabel('time (s)')
xlim([0 2])
ylim([-2 2])

subplot(3,1,3)
plot(t,demodx) %plot demodulated graph
title('Frequency Demodulated Signal')
xlabel('time (s)')

Answer 2

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

然后在同一主页的生命周期方法this.menu.enable(false);上，重新启用菜单以使其可用于前进

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

2 个答案: