How can I make the menus being displayed correctly when navigating between pages

Question

The application I'm developing has this structure: there's two main pages with each a different side menu.

When accessing the first page, the right menu is being displayed. When accessing the second page from the first page, the right menu is also being displayed. The problem will occurred when trying to go the the first page again. The second menu is correctly hidden, but the menu from the first page is never displayed.

This is small repo to show the problem: https://github.com/iamkinetic/ionic4-multiple-menus-bug

Every version of Ionic (from 4.6 to 4.10) seems to have this issue and even manually enabling the menu doesn't fully fix the issue. Am I doing something wrong? Is there a better way to do this?

Answer 1

我有同样的问题。我刚刚制作了一个名为 menu 的新角度组件，并将其引入到所有需要它的组件中。发生这种情况是因为当您返回时不会再次引用 ionicMenu。您不能在这里使用 ionic cli。您可能需要手动解决。如果我找到代码并将其放在这里，我会再次编辑。

更新：这是步骤。

1. menu使用 ionic-cli创建一个名为 ionic 的页面组件
2. 将其放入 HTML 中

<ion-header>
  <ion-toolbar [color]="currentColor">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      My App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-menu contentId="child-content" side="start" menuId="custom" class="my-custom-menu" type="overlay">
  <ion-header>
    <ion-toolbar [color]="currentColor">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list (click) = "closeMenu()">
      <ion-item routerLink="/dashboard/home" closeMenu>Home</ion-item>
      <ion-item routerLink="/dashboard/myorder" menuClose>My Order</ion-item>
      <ion-item routerLink="/dashboard/aboutus" menuClose>About us</ion-item>
      <ion-item routerLink="/dashboard/contactus" menuClose>Contact us</ion-item>
      <ion-item routerLink="/dashboard/feedback" menuClose>Feedback</ion-item>
      <ion-item (click) = "logout()">Log Out</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-content overflow-scroll="true">
  <ion-router-outlet id="child-content"></ion-router-outlet>
</ion-content>

3. 复制您想要菜单组件的所有路由app-routing.module.ts并将它们粘贴到menu.module.ts类似的位置

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MenuPage } from './dashboard.page';

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: '', redirectTo: 'home', pathMatch: 'full'
      },
      { path: 'schedule', loadChildren: '../schedule/schedule.module#SchedulePageModule' },
      { path: 'orderstatus/:id', loadChildren: '../orderstatus/orderstatus.module#OrderstatusPageModule' },
      { path: 'payment', loadChildren: '../payment/payment.module#PaymentPageModule' },
      { path: 'aboutus', loadChildren: '../aboutus/aboutus.module#AboutusPageModule' },
      { path: 'contactus', loadChildren: '../contactus/contactus.module#ContactusPageModule' },
      { path: 'howitworks', loadChildren: '../howitworks/howitworks.module#HowitworksPageModule' },
      { path: 'myorder', loadChildren: '../myorder/myorder.module#MyorderPageModule' },
      { path: 'orderdetails/:id', loadChildren: '../orderdetails/orderdetails.module#OrderdetailsPageModule' },
      { path: 'feedback', loadChildren: '../feedback/feedback.module#FeedbackPageModule' },
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
    ]
  },
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

4. 现在，您应该在“菜单页面”下为所有路线提供一个通用菜单。并且应该能够访问它们，就/menu/somepage好像您不喜欢menu路径中的一样，将其更改为类似的内容dashboard或中的内容app-routing.module.ts