菜单不会出现在使用打字机的ionic2中 [英] Menu won't appear in ionic2 with typescript
问题描述
我正尝试在ionic2的navbar中创建一个简单的菜单。我已经跟踪了tut,但它不会在我的应用程序中工作,我似乎无法理解为什么。这是我现在使用的代码:
app.ts
i'm trying to create a simple menu in the navbar with ionic2. i've followed the tut's but it won't work in my application and i can't seem to understand why. This is the current code i have: 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:
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:
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>
就文档而言,这应该起作用..但它不适用于我的情况,所以有人看到我失踪了吗?
As far as the docs go this should work.. but it won't in my case, so does anyone see what i'm missing?
没有错误,我没有看到任何问题正常查看加载。只是没有菜单,我跟着入门toturial
No errors, i don't see any problems view loads normally. Just no menu and i followed the getting started toturial
推荐答案
也许你应该在菜单的@Page元素中添加一个选择器属性class:
Maybe you sould add a selector property in the @Page metatada of the Menu class:
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文件添加:
And in your index.html file add:
<app-menu></app-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
编辑:
将以下内容添加到@Component元数据中(例如在Page1类中)
Add the following into the @Component metadata (for example in Page1 class)
<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
I've updated your codepen: http://codepen.io/anon/pen/LNGzJN
这篇关于菜单不会出现在使用打字机的ionic2中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!