Ionic 4 2 菜单在同一页面上答案

【问题标题】：Ionic 4 2 menus on same pageIonic 4 2 菜单在同一页面上
【发布时间】：2020-05-06 22:22:02
【问题描述】：

我正在尝试将多个菜单添加到 ionic 中的同一页面，但是当我打开其中一个时，我无法单击任何链接。

在我的应用程序组件中，我有一个菜单和一个用于右侧菜单的单独组件。

<ion-app>
  <ion-menu menuId="mainMenu" side="start" contentId="mainMenu" swipe-gesture="false">
    <ion-header>
      <ion-toolbar>
        <ion-title>Pages Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
            <ion-icon slot="start" [name]="p.icon"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <app-side-menu></app-side-menu>
  <ion-router-outlet id="mainMenu"></ion-router-outlet>
</ion-app>

这是我的侧边菜单组件

<ion-menu side="end" menuId="sideMenu" id="sideMenu" contentId="sideMenu" swipe-gesture="false">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>

    <div *ngFor="let p of menu">

      <ion-menu-toggle *ngIf="p.url">
        <ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
          <ion-icon [name]="p.icon" slot="start"></ion-icon>
          <ion-label>
            {{ p.title }}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>

      <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.active-parent]="p.open" detail="false">
        <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open">,/</ion-icon>
        <ion-icon slot="start" name="arrow-down" *ngIf="p.open">,/</ion-icon>
        <ion-label>{{ p.title }}</ion-label>
      </ion-item>

      <ion-list *ngIf="p.open">
        <ion-menu-toggle>
          <ion-item class="sub-item"  *ngFor="let sub of p.children" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active">
            <ion-icon [name]="sub.icon" slot="start"></ion-icon>
            <ion-label>
              {{ sub.title }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </div>
  </ion-content>
</ion-menu>

在我想要显示两个菜单的页面上，这是标题

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menu="mainMenu" autohide="false"></ion-menu-button>
    </ion-buttons>

    <ion-buttons slot="end">
      <ion-menu-button menu="sideMenu" autohide="false"></ion-menu-button>
    </ion-buttons>

    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

一切都正确显示，左侧菜单工作正常，但是当我打开右侧菜单时，我无法点击任何内容或点击离开。

【问题讨论】：

对于这个分类，你可以尝试而不是将你的侧边菜单打包到一个组件中，直接内联它吗？我不记得确切的问题，但是当我实现双菜单方法时，我必须在 app.component.html 中内联两个组件。请尝试一下，看看它是否有效？
它需要在一个组件中，因为它是一个动态菜单并使用一个服务。如果我内联它也会发生同样的事情。
我明白了，是的，如果总体上可行，我认为这只是在您的情况下调整 contentID 的问题。侧边菜单必须指向相应的路由器插座才能工作。不确定您的侧边菜单当前指向哪个路由器插座。

标签： angular ionic-framework ionic4

【解决方案1】：

尝试将侧边菜单的 contentId 设置为必须呈现路由内容的路由器插座的 ID。在这种情况下，我认为您要指向“mainMenu”：

因为：

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

您需要将侧边菜单指向它：

<ion-menu side="end" menuId="sideMenu" id="sideMenu" contentId="mainMenu" swipe-gesture="false">
    ...
</ion-menu>

【讨论】：