Question

我一直在尝试Ionic 3的离子菜单。当侧面菜单覆盖屏幕时，“ type = overlay”功能可以正常工作，但是“ type”属性的“ push”或“ reveal”值似乎都没有工作。

当我单击按钮时，什么也没有发生，但是在我检查时确定单击了按钮。如果它们有效，我还没有在模拟器/电话中尝试过它们。但是the ionic-documents on it显示可以在浏览器上对其进行测试。

<ion-menu side="start" menuId="first" [content]="content" type="push">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content #content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button menuToggle (click)="openFirst()"><ion-icon name="add"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>
  content
</ion-content>

。

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private menu: MenuController) {

  }

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }
}

我希望这段代码可以推动整个页面并显示侧边栏菜单，但是它什么也没做。

Answer 1

不需要按钮单击功能，因为使用了menuToggle：

.catch

也请检查此链接。我已经实现了菜单类型。

https://stackblitz.com/edit/ionic-4j3yqp?file=app/app.html

离子菜单的推开式显示不起作用

1 个答案: