Меню Ionic v4 работает только тогда, когда роутер-розетка имеет основной атрибут

Question

Я впервые создаю приложение с помощью ionic v4 и хочу добавить боковое меню.

По причинам тестирования я сначала поместил его в app.component.html, но не смог 'не позволяйте ему смахивать или входить.

Так что я видел в документации, что они добавили атрибут main к ion-router-outlet, но, насколько я понял, он нигде не задокументирован.

Я не знаю, зачем мне это добавлять, чтобы это действительно работало.

Источник: https://ionicframework.com/docs/api/menu

<ion-router-outlet main></ion-router-outlet>

Итак, я столкнулся с этим: https://ionicframework.com/docs/api/router-outlet#properties, где в основном объясняется компонент, НО

это свойство вообще не задокументировано.Я не могу его найти.

Итак, всем: мне нужно добавить это и когда: почему?

Мое меню довольно простое, но я распечатал его ниже, так что вы, ребята, можетепосмотри, что я собрал.

<ion-app>
  <ion-menu menuId="sideMenu" swipeGesture="true">
    <ion-header>
      <ion-toolbar>
        <ion-button slot="start">
          <img alt="logo" src="../assets/logo.svg">
        </ion-button>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Attack</ion-item>
        <ion-item>Defence</ion-item>
        <ion-item>Feedback</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

Answer 1

Атрибут main - это пользовательский атрибут, который сам по себе не имеет функции. Другие компоненты могут полагаться на это. ion-menu присоединит классы к компоненту, который соответствует contentId ИЛИ, если это не установлено с элементом, имеющим атрибут main.

Вы можете увидеть это, посмотрев исходный код :

const content = this.contentId !== undefined
  ? this.doc.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;
}
this.contentEl = content as HTMLElement;

// add menu's content classes
content.classList.add('menu-content');

Другими словами, вам не нужно устанавливать атрибут main, если вместо этого вы устанавливаете идентификатор на ion-content (только не тот, который внутри ion-menu). Вы также можете установить идентификатор на ion-router-outlet, что будет аналогично установке атрибута main.