Question

我已根据用户角色动态创建了侧边菜单。但我的问题是，当我点击菜单项时，我的页面无法向后滑动。屏幕仅停留在菜单上。我需要手动点击页面才能看到该页面。

app.html

<ion-menu [content]="content" swipeEnabled="true" class="menu" type="reveal" width="100px">
<ion-header>
    <ion-toolbar color="navbar">
      <ion-grid>
        <ion-row class="menu-title">
            <ion-title end>MENU</ion-title>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
</ion-header>
<ion-list>
  <ion-item class="menu-item" *ngFor="let item of menuItems" (click)="itemClick(item.component, $event)">{{item.name}}
    <ion-list *ngIf="item.subMenu">
      <ion-item class="menu-item" *ngFor="let subItem of item.subMenu" (click)="itemClick(subItem.component, $event)">{{subItem.name}}</ion-item>
    </ion-list>
  </ion-item>
</ion-list>

Answer 1

您需要使用menuClose属性。

<ion-menu [content]="content" swipeEnabled="true" class="menu" type="reveal" width="100px">
<ion-header>
    <ion-toolbar color="navbar">
      <ion-grid>
        <ion-row class="menu-title">
            <ion-title end>MENU</ion-title>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
</ion-header>
<ion-list>
  <ion-item menuClose  class="menu-item" *ngFor="let item of menuItems" (click)="itemClick(item.component, $event)">{{item.name}}
    <ion-list *ngIf="item.subMenu">
      <ion-item menuClose  class="menu-item" *ngFor="let subItem of item.subMenu" (click)="itemClick(subItem.component, $event)">{{subItem.name}}</ion-item>
    </ion-list>
  </ion-item>
</ion-list>

现在点击这些项目将自动关闭菜单

单击菜单项后，菜单不会向后滑动

1 个答案: