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

Я впервые создаю приложение с 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>

ionic-framework angular ionic4 router-outlet
person Community    schedule 25.03.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Атрибут 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.

person Loke    schedule 25.04.2019
comment
Спасибо за этот вопрос. Я считаю абсолютно абсурдным, что ionic не может задокументировать атрибут main, очень важный аспект ion-menu. Нет ничего хуже плохой документации. Ваше здоровье - person Josh O'Connor; 31.07.2019