1

我正在尝试实现像ion-menu组件页面中显示的侧菜单。

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

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

menu.js:292 菜单：必须有一个 [content] 元素来监听拖动事件。例子：

<ion-menu [内容]="内容">

<离子导航#内容>

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

如何在不彻底改变现有应用程序架构的情况下拥有一个简单的侧边菜单？

谢谢

4

1 回答 1

2

您的错误来自以下 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();
}
于 2020-05-27T06:51:53.887 回答