在ionic3中显示一个没有路由和手势的离子菜单

Question

我正在尝试实现一个侧边菜单，如ion-menu组件页面中显示的菜单。

我只想以编程方式显示侧边菜单，我并不是要从中触发导航或在顶部栏中有一个汉堡按钮。我既不使用ion-router-outlet也不使用任何其他路由系统。

我尝试在页面上复制并粘贴示例，但我得到的是控制台中的错误：

menu.js：292 菜单：必须具有 [content] 元素才能侦听拖动事件。例：

<菜单>

<离子导航>

但这不是我想要的。我的意思不是要有任何元素来监听拖动事件，我也不想要ion-nav.我尝试添加[swipeEnabled]="false"但它没有任何改变。

如何在不彻底改变现有应用程序的体系结构的情况下拥有一个普通的侧菜单？

谢谢

Answer 1

您的错误来自 Ionic 菜单组件的以下部分： (请参阅代码 - 第 169 行(

const content = this.contentId !== undefined
? document.getElementById(this.contentId)
: parent && parent.querySelector && parent.querySelector('[main]');
if (!content || !content.tagName) {
// requires content element
console.error('Menu: must have a "content" element to listen for drag events on.');
return;
}

Ionic正在您的页面上寻找contentId。您可以通过在您的内容周围包裹一个div 来实现这一点。并在某处放置触发器以打开或关闭菜单。

<ion-menu contentId="main-content">
<!-- all menu items -->
</ion-menu>
<div id="main-content">
<ion-content>
<!-- rest of page -->
<ion-button (click)="openMenu()">Open Menu</ion-button>
</ion-content>
</div>

constructor(private menu: MenuController) { }
openMenu() {
this.menu.toggle();
}