typescript Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53003274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic4 component - Menu: must have a 'content' element to listen for drag events on
提问by davidesp
I have the following code:
我有以下代码：
<!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/[email protected]/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/[email protected]/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>
It works fine with one exception:when the page loads, there is the following error on the console:
它工作正常，但有一个例外：当页面加载时，控制台上出现以下错误：
Error: "Menu: must have a 'content' element to listen for drag events on."
Here you have the CodePen.io:
在这里你有CodePen.io：
https://codepen.io/anon/pen/qJgEzZ/?editors=1011
https://codepen.io/anon/pen/qJgEzZ/?editors=1011
And below you can try the code right here on StackOverflow:
您可以在下面尝试代码StackOverflow：
window.addEventListener('load', event => {
document.querySelector('.button_details').addEventListener('click', (event) => {
document.querySelector('.menu_main').toggle();
});
});<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/[email protected]/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>Any idea on how to solve this problem? What is it missing here?
关于如何解决这个问题的任何想法？这里缺少什么？
Could you please fork my CodePen.iowith a proper code?
你CodePen.io能用正确的代码分叉我吗？
Thanks!
谢谢！
回答by manish kumar
if you want the code:
use content-id="content"and on ion-content id="content"
如果你想要代码：使用content-id="content"和 on ion-contentid="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>
回答by Thomas
If you don't require the swipe gesture to open the menu you can add the swipe-gesture="false"attribute to the ion-menutag. IMO this should get rid of the error but doesn't at the moment. I've created an issue on GitHub.
https://codepen.io/anon/pen/mzgRBj?editors=1011
如果您不需要滑动手势来打开菜单，您可以将swipe-gesture="false"属性添加到ion-menu标签中。IMO 这应该可以消除错误，但目前还没有。我在 GitHub 上创建了一个问题。
https://codepen.io/anon/pen/mzgRBj?editors=1011
If you want the swipe gesture to work you have to reference the content element's ID on the ion-menuelement using the content-idattribute, see https://codepen.io/anon/pen/BqEpxE?editors=1011
如果您希望滑动手势起作用，则必须ion-menu使用content-id属性在元素上引用内容元素的 ID ，请参阅https://codepen.io/anon/pen/BqEpxE?editors=1011
回答by deanwilliammills
Theion-menuneeds a contentIdand the ion-router-outletneeds an id, so the menu contentIdmust be the ion-router-outletid:
的ion-menu需要contentId和ion-router-outlet需求的id，所以菜单contentId必须ion-router-outletID：
<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>
回答by Aaron Jordan
To those in the future you're probably running into the issue where you have a router outlet inside your ion-split-pane right?
对于将来的人，您可能会遇到在离子分裂窗格中有路由器插座的问题，对吗？
Do this:
做这个：
<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>
Note that the [main] attribute that was on your ion-router-outletis now gone
请注意，您的 [main] 属性ion-router-outlet现已消失
Source: https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915
来源：https: //github.com/ionic-team/ionic/issues/19618#issuecomment-540648915
