angularjs - 菜单 : must have a "content" element to listen for drag events on

Question

我创建了一个菜单组件，里面有菜单按钮和 ionic 菜单，因为我想在多个页面上使用这个组件。为了在不同的页面上使用这个组件，我创建了一个带有菜单组件的模块，然后在每个应该有菜单的页面上导入。访问页面时出现错误

Menu: must have a "content" element to listen for drag events on

app.component.html

<ion-app>
    <ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-app>

menu.component.html

<div id="menu-button" (click)="this.toggleMenu()">
    <span></span>
    <span></span>
    <span></span>
</div>
<ion-menu side="start" contentId="main-menu" menuId="main-menu">
    <ion-content>
        <ion-menu-toggle auto-hide="false">
            <ion-list lines="none">
                <ion-item [routerLink]="'/list-view'">
                    <ion-icon name="list-outline" slot="start"></ion-icon>
                    {{ 'PAGES.LISTVIEW.LISTVIEW' | translate }}
                </ion-item>
                <ion-item [routerLink]="'/settings'">
                    <ion-icon name="list-outline" slot="start"></ion-icon>
                    {{ 'PAGES.SETTINGS.PKEY' | translate }}
                </ion-item>
                <ion-item (click)="logout()">
                    <ion-icon name="log-out-outline" slot="start"></ion-icon>
                    {{ 'PAGES.LOGIN.LOGOUT' | translate }}
                </ion-item>
            </ion-list>
        </ion-menu-toggle>
    </ion-content>
</ion-menu>

Answer 1

我直接在里面用ion-split-pane此代码有效:

app.component.html

<ion-app>
  <ion-split-pane contentId="menu-content">
    <ion-menu contentId="menu-content" menu="menu-content-dx" side="end" type="overlay">
      <ion-header>
        <ion-menu-toggle>
          <ion-toolbar>
            <ion-title>menu (under construction) </ion-title>
          </ion-toolbar>
        </ion-menu-toggle>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle>
            <ion-item [routerLink]="['/auth/logout']">
              <ion-icon name="information-outline" slot="start"></ion-icon>
              <ion-label>Logout</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <!-- router outlet here -->
    <ion-router-outlet id="menu-content" main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

home.page.html在工具栏中对菜单 id 的引用:menu="menu-content-dx"

<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="end">
  <ion-menu-button menu="menu-content-dx"></ion-menu-button>
</ion-buttons>
<ion-title>
  home menu
</ion-title>
</ion-toolbar>
</ion-header>