【问题标题】:Menu won't appear in ionic2 with typescript带有打字稿的 ionic2 中不会出现菜单
【发布时间】:2016-06-20 19:51:29
【问题描述】:

我正在尝试使用 ionic2 在导航栏中创建一个简单的菜单。我已经遵循了 tut,但它在我的应用程序中不起作用,我似乎无法理解为什么。这是我拥有的当前代码: app.ts

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {MenuPage} from './pages/menu/menu';

@App({
  templateUrl: 'build/index.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;
    platform.ready().then(() => {
    });
  }

}

index.html:

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

menu.ts:

import{Page, MenuController} from 'ionic-angular';
@Page({
    templateUrl: 'build/pages/menu/menu.html'
})
export class MenuPage {
 constructor(menu: MenuController) {
   this.menu = menu;
 }

 openMenu() {
   this.menu.open();
 }

}

menu.html:

<ion-menu  persistent="true" [content]="content">
  <ion-toolbar>
    <ion-title>Instellingen</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item>
        Informatie
      </button>
      <button ion-item>
        Veelgestelde vragen
      </button>
      <button ion-item>
        Algemene Voorwaarden
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

就文档而言,这应该可以工作..但在我的情况下它不会,所以有人看到我缺少什么吗?

没有错误,我没有看到任何问题查看正常加载。只是没有菜单,我按照入门教程进行操作

【问题讨论】:

标签: html typescript angular ionic2


【解决方案1】:

也许您应该在 Menu 类的 @Page 元数据中添加一个选择器属性:

import{Page, MenuController} from 'ionic-angular';
@Page({
    templateUrl: 'build/pages/menu/menu.html',
    selector:'app-menu'
})
export class MenuPage {
 constructor(menu: MenuController) {
   this.menu = menu;
 }

 openMenu() {
   this.menu.open();
 }

}

然后在你的 index.html 文件中添加:

<app-menu></app-menu>
<ion-nav #content [root]="rootPage"></ion-nav>

编辑: 将以下内容添加到@Component 元数据中(例如在 Page1 类中)

<ion-navbar *navbar hideBackButton>
    <button menuToggle>
      <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>Tab 1</ion-title>
</ion-navbar>

我已经更新了你的 codepen:http://codepen.io/anon/pen/LNGzJN

【讨论】:

  • 这也不起作用, 在加载时保持空白。
  • 如果您在 MyApp 类中添加指令元数据:@App({ templateUrl: 'build/index.html', directives:[MenuPage], config: {} })
  • 例外:组件“MyApp”视图上的意外指令值“未定义”我是否导入错误?这是我的问题codepen.io/sjerd/pen/xVZdjb 的代码笔
  • 我只是注意到我可以拖动它.. 我只是看不到它的按钮
猜你喜欢
  • 2017-02-19
  • 2017-04-09
  • 1970-01-01
  • 1970-01-01
  • 2019-10-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多