在ionic3中显示离子菜单，而无需路由和手势

Question

我正在尝试实现如ion-menu component page中所示的侧菜单。

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

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

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

但是这不是我想要的。我的意思不是要有任何元素来监听拖动事件，并且我不需要ion-router-outlet。我尝试添加ion-nav，但没有改变。

如何在不改变现有应用程序体系结构的情况下拥有简单的侧面菜单？

谢谢

Answer 1

您的错误来自Ionic的以下菜单组件：[swipeEnabled]="false"

(see code - line 169)

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

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

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