Показывать ion-меню в ionic3 без роутинга и без жестов

Question

Я пытаюсь реализовать боковое меню, подобное тому, которое показано на странице компонента ion-menu .

Я просто хочу показать боковое меню программно, я не означают запускать навигацию из него или иметь кнопку бургера на верхней панели. Я не использую ни ion-router-outlet, ни какие-либо другие системы маршрутизации.

Я попытался скопировать и вставить пример на страницу, но получаю ошибку в консоли:

меню. js: 292 Меню: должен иметь элемент [content] для прослушивания событий перетаскивания. Пример:

Но это не то, что я хочу. Я не хочу иметь какой-либо элемент для прослушивания событий перетаскивания, и мне не нужен ion-nav. Я попытался добавить [swipeEnabled]="false", но ничего не изменилось.

Как я могу получить простое боковое меню, не меняя архитектуру моего существующего приложения?

Спасибо

Answer 1

Ваша ошибка возникает из-за следующей части компонента меню Ioni c: (см. Код - строка 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;
}

Ioni c ищет 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();
}