菜单组件未显示

时间:2016-06-16 15:58:30

标签: ionic2

我正在努力在空白ionic2模板中添加'burger' menu。不确定这里做错了什么,但我所做的只是生成一个空白离子模板,在app.ts中将模板字符串更改为templateUrl并将代码粘贴到app.html中。我没有收到任何控制台错误。

app.ts:

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';


@Component({
  templateUrl: 'build/app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);

app.html:

<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Pages</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage(loginPage)">
                Login
            </button>
            <button ion-item (click)="openPage(signupPage)">
                Signup
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage"></ion-nav>

1 个答案:

答案 0 :(得分:4)

我错过了按钮

  <button right menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>

来自home.html

<ion-navbar *navbar>
  <ion-title>
    Blank Starter
  </ion-title>
  <button right menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
</ion-navbar>

<ion-content class="home">
  <h1 text-center>Content goes here!</h1>
</ion-content>