Menu won't appear in ionic2 with typescript

0

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:

<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>

As far as the docs go this should work.. but it won't in my case, so does anyone see what i'm missing?

No errors, i don't see any problems view loads normally. Just no menu and i followed the getting started toturial

Sjoerd de Wit

출처 html typescript angular ionic2

1 답변

0

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();
 }

}

And in your index.html file add:

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

EDIT: 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>

I've updated your codepen: http://codepen.io/anon/pen/LNGzJN

  • this also didn't work, <app-menu> stayed empty on load. - Sjoerd de Wit
  • and if you add the directives metadata on the MyApp class: @App({ templateUrl: 'build/index.html', directives:[MenuPage], config: {} }) - Michael Desigaud
  • EXCEPTION: Unexpected directive value 'undefined' on the View of component 'MyApp' am i importing it wrong? here's a codepen with my issue codepen.io/sjerd/pen/xVZdjb - Sjoerd de Wit
  • i don't have any issue with your codepen example - Michael Desigaud
  • i just noticed i can drag it.. i just can't see a button for it - Sjoerd de Wit

Linked

Related

Latest