Ionic 3 - 在它自己的组件中提取侧边菜单

Question

我需要为 ionic 2/3 应用程序构建一个可扩展的菜单（最好使用 ion-menu）。按照docs 上的指南，菜单应该是主要内容的同级，他们建议将其保留在 app.html 中，这是应用程序中一个非常高的位置，不必太拥挤。

如果我们有一个大菜单，或者如果我们需要使用几个不同的菜单，由应用程序内部的操作触发，那么这个地方不适合这个目的。

我想将菜单的复杂性隐藏在它自己的容器/组件中，并处理 app.component.ts 之外的逻辑。

app.html 应该保持苗条，并且像下面这样的结构可能会有用。

<app-menu></app-menu> // this should be the enclosing container of the menu logic
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

如果我这样做，会出现以下错误：

Menu: must have a [content] element to listen for drag events on. Example:
<ion-menu [content]="content"></ion-menu>
<ion-nav #content></ion-nav>

关于如何实现这一点，避免将代码直接添加到 app.html 和 app.component.ts 有什么想法吗？

Tks

Answer 1

如果你使用<ion-menu [content]="content"></ion-menu>，错误代码只是告诉你写<ion-nav #content></ion-nav>...

下面的示例切换菜单代码...

<ion-header>
  <ion-navbar color="danger">
      <ion-buttons start>
        <button ion-button icon-only menuToggle>
          <ion-icon name="menu">

          </ion-icon>
        </button>
      </ion-buttons>
  </ion-navbar>


<ion-menu [content]="content">
    <ion-content padding>
        this is awkmal
    </ion-content>
</ion-menu>


</ion-header>
<ion-nav #content></ion-nav>