时间戳

首页 > 解决方案 > Ionic 4 - 路由器、页面和侧边菜单

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

问题描述

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

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

下面的一些代码。

应用程序路由.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' },
];

菜单.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>

菜单/预订/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 路线并显示菜单 手动输入 /menu/bookings 路线并显示菜单

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

标签： angularionic-frameworkionic4

解决方案

它看起来不像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:8100http://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'
      },

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

推荐阅读