0

나는 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 시작하는 따라 갔다.


1 답변


0

아마도 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


  • 이 또한 작동하지 않았습니다. & lt; app-menu & gt; 짐을 싣고 비웠다. - Sjoerd de Wit
  • MyApp 클래스에 지시문 메타 데이터를 추가하는 경우 :@App({ templateUrl: 'build/index.html', directives:[MenuPage], config: {} }) - Michael Desigaud
  • 예외 : 예상치 못한 지시 값 & undefined & # 39; 구성 요소 & # 39; MyApp & # 39; 내가 잘못 가져 왔나? 내 문제가있는 코덱codepen.io/sjerd/pen/xVZdjb - Sjoerd de Wit
  • 코드 예제와 관련하여 문제가 없습니다. - Michael Desigaud
  • 방금 끌 수있는 것으로 나타났습니다. 버튼을 볼 수 없습니다. - Sjoerd de Wit

연결된 질문


관련된 질문

최근 질문