Компонент ionic4 - меню: должен иметь элемент «контент» для прослушивания событий перетаскивания.

У меня такой код:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic 4 - Menu</title>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<script>
window.addEventListener('load', event => {
    document.querySelector('.button_details').addEventListener('click', (event) => {
        document.querySelector('.menu_main').toggle();
    });
});
</script>
</head>
<body>

    <ion-menu class="menu_main" side="start">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>

</body>

</html>

Он отлично работает за одним исключением: при загрузке страницы на консоли появляется следующая ошибка:

Error: "Menu: must have a 'content' element to listen for drag events on."

Вот вам CodePen.io:

https://codepen.io/anon/pen/qJgEzZ/?editors=1011

А ниже вы можете попробовать код прямо здесь, на StackOverflow:

window.addEventListener('load', event => {
	document.querySelector('.button_details').addEventListener('click', (event) => {
		document.querySelector('.menu_main').toggle();
	});
});
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet"/>
	<ion-menu class="menu_main" side="start">
		<ion-header>
			<ion-toolbar color="secondary">
				<ion-title>Left Menu</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content padding>
			Hello World!
		</ion-content>
	</ion-menu>
	<ion-menu-controller></ion-menu-controller>

	<ion-card style="display:inline-block;width:300px">
		<ion-card-header>
			<ion-card-title>Hello World</ion-card-title>
		</ion-card-header>
		<div style="padding:10px 10px;text-align:right;">
			<ion-button color="primary" class="button_details">Details</ion-button>
		</div>
	</ion-card>

Есть идеи, как решить эту проблему? Чего здесь не хватает?

Не могли бы вы разветвить мой CodePen.io с правильным кодом?

Спасибо!

ошибка исходит из тега ion-menu-controller. если вы не хотите его использовать, просто удалите этот тег.

Mankeomorakort 26.10.2018 09:17

даже если вы удалите этот тег, ошибка не исчезнет. Вы можете попробовать это сами.

davidesp 26.10.2018 09:19

хорошо, замените ion-menu-controller и добавьте <ion-nav [root] = "rootPage" main #content swipeBackEnabled = "false"> </ion-nav> и проверьте снова.

Mankeomorakort 26.10.2018 09:34

не могли бы вы вставить сюда codepen.io? Благодарность!

davidesp 26.10.2018 13:19
14
4
23 087
5

Ответы 5

Если вам не нужен жест смахивания для открытия меню, вы можете добавить атрибут swipe-gesture="false" в тег ion-menu. ИМО, это должно избавить от ошибки, но на данный момент этого не происходит. Я создал проблема на GitHub. https://codepen.io/anon/pen/mzgRBj?editors=1011

Если вы хотите, чтобы жест смахивания работал, вам необходимо сослаться на идентификатор элемента содержимого в элементе ion-menu, используя атрибут content-id, см. https://codepen.io/anon/pen/BqEpxE?editors=1011

если вам нужен код: используйте content-id="content" и id="content" с ионным содержанием

<ion-menu class="menu_main" side="start" content-id="content">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-content id="content">
     <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>
</ion-content>

Для тех, в будущем вы, вероятно, столкнетесь с проблемой, когда у вас есть розетка маршрутизатора внутри вашей ионно-разделенной панели, верно?

Сделай это:

<ion-split-pane contentId="my-content">
     <ion-menu contentId="my-content"> ... </ion-menu>
     <ion-router-outlet id="my-content"></ion-router-outlet>
</ion-split-pane>

Обратите внимание, что атрибут [main], который был на вашем ion-router-outlet, теперь исчез.

Источник: https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915

Спасибо, это помогло мне, сообщения об ошибках не ясно, как справиться с этой ситуацией

Thomas Gangsøy 12.02.2020 16:54

Для ion-menu нужен contentId, а для ion-router-outlet - id, поэтому в меню contentId должен быть идентификатор ion-router-outlet:

<ion-menu side="start" contentId="menuContent">
   <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Start Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-router-outlet id="menuContent"></ion-router-outlet>

Спасибо за ответ. Многие учебники устарели и не отражают этого.

Vidal Quevedo 05.12.2019 04:28
To Whom it may concern, this is what i did.

<ion-split-pane contentId="main">
  <ion-menu side="start" contentId="main">
    <ion-header>
         <ion-toolbar color="primary">
             <ion-title>Start Menu</ion-title>
         </ion-toolbar>
     </ion-header>
     <ion-content>
         <ion-list>
             <ion-item>LogOut</ion-item>
         </ion-list>
     </ion-content>
 </ion-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

Пожалуйста, не публикуйте только код в качестве ответа, но также объясните, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более полезны и качественнее, и с большей вероятностью получат положительные отзывы.

Tyler2P 29.12.2020 20:48

Добавление contentId = "main" работает для меня Спасибо

Divek John 16.02.2021 08:56

Без описания того, какая часть кода примера, который вы предоставили, решает проблему, трудно понять, почему он решает ее. Даже если код хороший, без объяснений это еще не решение.

Peter Koller 29.09.2021 13:26

Другие вопросы по теме