Я решил разместить боковое меню на своей странице, следуя документации Я должен вставить тег <ion-router-outlet> на этой странице, иначе меню не будет активировано. Проблема в том, что когда я вставляю этот тег, все мои кнопки больше не работают. Ни функция щелчка, ни анимация нажатия кнопки не работают.
Первоначально я использовал тег <ion-menu-button для переключения меню, поэтому я попытался переключиться с помощью функции: menuController.toggle(), но это не работает идаже для этого мне нужно <ion-router-outlet> для активации меню.
Без тега я получаю сообщение об ошибке:
Меню: должен иметь элемент "content" для прослушивания событий перетаскиваниявкл.
Мой код:
<ion-content>
<ion-menu side="end">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngIf="userAccess == 'all'" href="randomHrefLink" target="_blank">
randomMenuItem
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-list>
<ion-item *ngIf="userAccess == 'all' || userAccess == 'randomItem'">
<ion-thumbnail slot="start">
<img src="assets/thumbs/randomThumbnail.jpg">
</ion-thumbnail>
<ion-label>
<h2>randomItem</h2>
<p>randomDate</p>
</ion-label>
<ion-button clear slot="end" (click)="randomFunction();">buttonWithProblem</ion-button>
</ion-item>
...
<ion-router-outlet main></ion-router-outlet>
</ion-list>
</ion-content>
Дополнительная информация:
- Есть еще одна страница с
<ion-router-outlet main> и другими меню, я пытался их удалить, но все остается прежним. На этой же странице я попытался воспроизвести проблему, я добавил кнопку с некоторой случайной функцией, чтобы посмотреть, была ли эта проблема на одной странице или на всех них. К сожалению, такая же ошибка произошла и на этой странице: - Некоторые функции щелчка работают внутри меню, только внешние кнопки не работают;
- Попытка добавить атрибут menuId в тег
<ion-menu>, но тоже ничего не изменилось; - Пытался реализовать функцию
(click) в теге, тоже не сработало; - На основании этого ответа , я пыталсядобавьте атрибут
contentId в тег <ion-menu> и отнесите его к <ion-router-outlet>, ничего не изменилось; - При этот другой ответ Я вижу предыдущую причину ошибки, но могуне определить, почему кнопки / функции не работают;
- Попробовал это предложение в соответствующем ответе SO, но также не вижу никакой разницы.
- Я создал stackblitz для более простого воспроизведения этой проблемы, но, к моему разочарованию, она работала нормально там. (Значок меню не отображается в верхнем правом углу, но он работает. Я получил шаблон ionic 4 онлайн, поэтому игнорируйте другие страницы). Итак, я вижу, что эта проблема возникает только в моем проекте, если у кого-то есть идеи, почему, пожалуйста, прокомментируйте.
- Я пытался воссоздать эту проблему в другом проекте, той же версии Ionic, но проблема также возникла там.
- Протестировано в Android и браузере
Информация о системе:
Ionic CLI: 5.4.4
NodeJS: v10.16.3