17

我用标签模板开始了一个项目，后来我决定添加一个侧面菜单。问题是侧边菜单根本不出现。这是我的 app.components.html 看起来像

<ion-app>
    <ion-split-pane>
        <ion-menu side="start">
            <ion-header translucent>
              <ion-toolbar color="secondary">
                <ion-title>Menu</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
          </ion-menu>
          <ion-router-outlet></ion-router-outlet>

        </ion-split-pane>
</ion-app>

实际上，在完成以上操作之后，我的实际页面会出现一秒钟，并因此显示一个白页。

在控制台中我看到一个错误

sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.

但我已经有内容元素。

4

2 回答 2

48

Sirius2013 是正确的，您将需要使用 contentId 属性。请参阅下面的工作示例：

App.component.html

<ion-app>
  <ion-menu contentId="content1" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      menu stuff
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>


AnyPage.html

在要显示侧面菜单的页面中，您可以使用ion-menu-button标签。
看这个例子：

<ion-header>
  <ion-toolbar>
    <ion-title>Page Title</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

将autoHide标签设置为false，因此您将始终看到菜单按钮。

文档： https ://beta.ionicframework.com/docs/api/menu-button

于 2018-12-07T14:51:46.330 回答
5 
<ion-menu>
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

https://beta.ionicframework.com/docs/api/menu

尝试使用 contentId 属性。

于 2018-12-06T23:31:02.110 回答