Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件

问题描述 投票：0回答：7

我有以下代码：

<!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>

它工作正常，但有一个例外：当页面加载时，控制台上出现以下错误：

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/[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>

知道如何解决这个问题吗？这里缺少什么？

您可以用正确的代码来分叉我的

CodePen.io
吗？

谢谢！

javascript typescript ionic-framework ionic4 stenciljs
7个回答
46
投票

ion-menu
需要
contentId
，
ion-router-outlet
需要
id
，所以菜单
contentId
必须是
ion-router-outlet
id:

<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>
25
投票

如果您想要代码：

使用 

content-id="content"
和离子含量 
id="content"
，其中 
id
是调用菜单的主视图 
ion-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>
10
投票

对于未来的人，您可能会遇到这样的问题：离子分离窗格内有路由器插座，对吧？

这样做：

<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>

请注意，您的 

ion-router-outlet
上的 [main] 属性现在已经消失了

来源：https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915

4
投票

如果您不需要滑动手势来打开菜单，您可以将 

swipe-gesture="false"
属性添加到 
ion-menu
标签。 IMO 这应该可以消除错误，但目前还没有。我在 GitHub 上创建了一个问题。 https://codepen.io/anon/pen/mzgRBj?editors=1011

如果您希望滑动手势正常工作，则必须使用 

ion-menu
属性在 
content-id
元素上引用内容元素的 ID，请参阅 https://codepen.io/anon/pen/BqEpxE?editors=1011

1
投票

如果您使用 React 和 Ionic 6，Ionic 文档有点过时。我必须更改以下项目才能出现菜单：

  1. 在 IonMenuButton 上设置 
    autoHide={false}
    ；
  2. 在 IonMenuButton 上设置 
    menu="start"
    （菜单属性的值必须等于 IonMenu side 属性）；

改编后的代码菜单：

  <IonMenu side="start" contentId="main-content">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Hello</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonList>
        <IonItem>Hello</IonItem>
      </IonList>
    </IonContent>
  </IonMenu>

  <div id="main-content">
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton autoHide={false} menu="start"></IonMenuButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  </div>
</IonApp>

来自 ion-menu 文档的原始代码 -> https://github.com/ionic-team/ionic-docs/blob/00c0885346e0f048bb2c2bda104ea26cd9d1ff52/static/demos/api/menu/index.html

0
投票

对于可能关心的人，这就是我所做的：

<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>
0
投票

下面的解决方案对我来说是 Ionic 8 中的独立组件：

// Ts Side
   import { IonMenu, IonHeader, IonTitle, IonToolbar, IonButton, IonContent, MenuController } from '@ionic/angular/standalone';
    
    standalone: true,
    imports: [IonMenu, IonHeader, IonTitle, IonToolbar, IonButton, IonContent, MenuController]
    
    
  constructor(private menuController: MenuController) { }

  openDeclaration() {
    this.menuController.open('second-menu'); // Opens the side menu
  }
    

// HTML SIDE
    <ion-button shape="round" (click)="openDeclaration()">Open Menu</ion-button>
    <ion-menu type="overlay" menuId="second-menu" contentId="content" id="content">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu Content</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding ion-text-justify">
        <p>
          I, hereby admit, while in my full legal competency that all the entered data and attached documents in this application are sound and accurate. Further, I shall advise Stackoverflow for Insurance within 10 days for any change that might take place on such data and documents or a fundamental change stated in this application. I also pledge to provide Stackoverflow with any information, data or documents that they might be requested later on with regard to this application. They shall have the right to verify and validate the soundness of this information, data or documents through official authorities.
        </p>
      </ion-content>
    </ion-menu>

output

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.