나는 ionic2와 navbar에서 간단한 메뉴를 만들려고 해요. 나는 혀를 따라 갔지만 그것은 내 응용 프로그램에서 작동하지 않을 것이며 왜 이해할 수없는 것 같습니다. 이것은 내가 가지고있는 현재 코드입니다 : 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>
지금까지 문서가 가면이 작업을해야합니다.하지만 내 경우에는 그렇게되지 않을 것입니다. 그래서 누락 된 부분을 볼 수 있습니까?
오류가 없으며 일반적으로로드를 볼 때 문제가 발생하지 않습니다. 그냥 메뉴와 나는 toturial 시작하는 따라 갔다.
아마도 Menu 클래스의 @Page 메타 데이터에 selector 속성을 추가해야 할 것입니다.
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>
귀하의 코드를 업데이트했습니다 :http://codepen.io/anon/pen/LNGzJN
@App({ templateUrl: 'build/index.html', directives:[MenuPage], config: {} })
- Michael Desigaud