簡體   English   中英

菜單不會在ionic2中顯示帶有打字稿的菜單

[英]Menu won't appear in ionic2 with typescript

我正在嘗試使用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>

就文檔而言,這應該可以工作..但就我而言,它不起作用,那么有人看到我所缺少的內容嗎?

沒有錯誤,我看不到任何問題,查看加載正常。 只是沒有菜單,我遵循了入門指南

也許您已經在Menu類的@Page metatada中添加了選擇器屬性:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM