Ionic 4 - 路由器、页面和侧边菜单

Question

有人可以帮我解决我的问题吗？我有一个视图（地图）和带有地图和其他选项的侧边菜单。

当我启动应用程序时，地图会显示但没有菜单图标并且存在地图位置问题（地图从顶部移动了一些像素）。当我手动导航到其他网址（预订）时，显示侧栏菜单按钮，现在我在地图上有菜单图标。

下面是一些代码。

app-routing.module.ts

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

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 './menu.page';

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        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'
      }
    ]
  }
];

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

map.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 { MapPage } from './map.page';

const routes: Routes = [
  {
    path: '',
    component: MapPage
  }
];

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

menu.page.html

<ion-menu contentId="content">

    <ion-header>
        <ion-toolbar>
            <ion-title>
                Simple menu
            </ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <div>
            <ion-menu-toggle>
                <ion-item routerLink="/map" routerDirection="root" routerLinkActive="active" detail='false'>
                    <ion-icon name="map" slot="start"></ion-icon>
                    <ion-label>
                        Map
                    </ion-label>
                </ion-item>
            </ion-menu-toggle>
        </div>
        <div>
            <ion-menu-toggle>
                <ion-item routerLink="/menu/bookings" routerDirection="root" routerLinkActive="active" detail='false'>
                    <ion-icon name="time" slot="start"></ion-icon>
                    <ion-label>
                        Booking history
                    </ion-label>
                </ion-item>
            </ion-menu-toggle>
        </div>

    </ion-content>

    <ion-footer>
        <div>
            <ion-menu-toggle>
                <ion-item routerLink="/login" routerDirection="root" routerLinkActive="active" detail='false'>
                    <ion-icon name="contact" slot="start"></ion-icon>
                    <ion-label>
                        Sign in
                    </ion-label>
                </ion-item>
            </ion-menu-toggle>
        </div>
    </ion-footer>

</ion-menu>

<ion-router-outlet id="content" main></ion-router-outlet>

map.page.html

<ion-header no-border no-padding>
    <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>

<ion-content fullscreen>
    <div class="map" id="map"></div>
</ion-content>

menu/bookings/page.html

<ion-header>
    <ion-toolbar color="transparent">
        <ion-buttons slot="start">
            <ion-menu-button color="tertiary"></ion-menu-button>
        </ion-buttons>
        <ion-title>Bookings</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

还有一些截图

第一次地图视图没有菜单图标和地图位置问题

手动输入 /menu/bookings 路线并显示菜单

从菜单导航到地图显示图标，但仍显示白色条纹

Answer 1

看起来MAP 不是MENU 的孩子。这是设计的吗？

看起来正在发生的是 map.html 正在加载第一个，但 menu.html 仅在您离开时才加载。

您需要“登陆”menu.html 页面才能加载它，然后手动导航到地图或重定向到它。

在app.component.ts 中，您可以在项目加载后添加路由器导航。

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.router.navigate(['menu', 'map']);

    });
  }

或者可能在menu.module.ts 中添加重定向，然后在http://localhost:8100 之后或在http://localhost: 之后看到的任何数字之后删除您的网络浏览器中的路径

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

const routes: Routes = [

  {
    path: '',
    redirectTo: 'menu/map',
    pathMatch: 'full'
  },

  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'bookings',
        loadChildren: './bookings/bookings.module#BookingsPageModule'
      },

我希望这可以帮助您解决问题。

Answer 2

问题是，由于某种原因，您的菜单不可用。也许你可以尝试这样做（map.page.ts）：

import { MenuController } from '@ionic/angular';
export class Map{
    [your code]
    ionViewDidEnter() //executed automaticly when you enter in the page
    {
        this.menu.enable(true,"yourMenuId")
    }
}

如果它没有解决您的问题，至少它可能会给您一条错误消息，告诉您出了什么问题