Ionic 4路由、页面与侧边菜单异常问题求助

Let's tackle your two main problems one by one—they're both rooted in how your routes are structured and how the side menu connects to your pages.

Problem 1: Map Page Missing Menu Icon & Top Offset on First Load #

The core issue here is that your MapPage isn’t nested under the MenuPage’s router outlet. Ionic’s ion-menu only works with pages loaded inside its associated <ion-router-outlet id="content">. Since MapPage is a top-level route, the ion-menu-button can’t find the menu instance, and layout calculations get messed up (causing the map offset).

Solution: Restructure Routes to Nest MapPage Under MenuPage #

1. Update app-routing.module.ts
   Remove the standalone map route and redirect directly to the nested menu/map route:

   const routes: Routes = [
     { path: '', redirectTo: 'menu/map', pathMatch: 'full' },
     { path: 'menu', loadChildren: './pages/menu/menu.module#MenuPageModule' },
   ];
   

2. Add MapPage as a Child Route in menu.module.ts
   Include the map route inside the MenuPage’s children array (adjust the loadChildren path to match your file structure):

   const routes: Routes = [
     { path: '', component: MenuPage, children: [
         { path: 'map', loadChildren: '../../map/map.module#MapPageModule' },
         { path: 'bookings', loadChildren: './bookings/bookings.module#BookingsPageModule' },
         { path: 'help', loadChildren: './help/help.module#HelpPageModule' },
         { path: 'payment', loadChildren: './payment/payment.module#PaymentPageModule' },
         { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
         { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
         { path: '', redirectTo: 'map', pathMatch: 'full' } // Default to map when accessing /menu
       ]
     }
   ];
   

3. Fix Map Container Styling
   In your map.page.scss, ensure the map takes up the full content area to eliminate the top offset:

   .map {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
   }
   

   Also, remove the no-border and no-padding attributes from your map.page.html’s ion-header—these disrupt Ionic’s default layout calculations:

   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
         <ion-menu-button color="primary"></ion-menu-button>
       </ion-buttons>
       <ion-searchbar animated></ion-searchbar>
     </ion-toolbar>
   </ion-header>
   

Problem 2: Top White Bar on Map Page After Switching From Bookings #

This is a side effect of the first issue—since MapPage wasn’t properly nested under the menu, switching back leaves residual layout inconsistencies. Once you restructure the routes as above, this white bar should disappear automatically because all pages will share the same menu-driven layout context.

Final Checks #

• Restart your Ionic dev server to ensure all route changes take effect.
• Verify that all menu links in menu.page.html use nested route paths (your existing code already uses routerLink="/map" correctly, which maps to the nested route now).

After these changes, your MapPage will load with the menu icon visible on first launch, the map will sit correctly without offset, and switching between pages won’t leave unexpected white bars.

内容的提问来源于stack exchange，提问作者Matthew