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

问题是由于某种原因，您的菜单不可用。也许您可以尝试执行此操作（在createHttpLink中）：

map.page.ts

如果它不能解决您的问题，至少它可能会给您一条错误消息，告诉您哪里出了问题

Answer 2

看起来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:之后看到的任何数字之后清除Web浏览器中的路径

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'
      },

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

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

2 个答案: