web-dev-qa-db-ja.com

ionic 4サイドメニューの追加

タブテンプレートを使用してプロジェクトを開始し、後でサイドメニューを追加することにしました。問題は、サイドメニューがまったく表示されないことです。ここに私の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.

しかし、私はすでにコンテンツ要素を持っています。

ionic-frameworkionic4ion-menu
10
Vik

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

29
Tomas Vancoillie
<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/men

ContentId属性を使用してみてください。

4
sirius2013