Question

我有一个核心模块，它有一个布局组件，其中包括一个工具栏模块和sidenav模块。然后我有一个地图模块，我想成为布局模块的孩子，所以html应该类似于：

<root>
  <layout>
    <sidenav></sidenav>
    <toolbar></toolbar>
    <map></map>
  </layout>
</root>

我已经分别测试了所有模块并且它们可以工作但是当我查看html时，它看起来像这样而不是上面：

<root>
  <map></map>
</root>

看起来地图模块只是覆盖了所有内容。如果我改变路线并且只有布局，我可以看到工具栏和sidenav工作，看起来像这样：

<root>
  <layout>
    <sidenav></sidenav>
    <toolbar></toolbar>
  </layout>
</root>

因此，它似乎不是任何模块本身的错误。嵌套路由似乎不起作用

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './core/layout/layout.component';

const routes: Routes = [{
   path: '',
   component: LayoutComponent,
   children: [{
    path: '',
    loadChildren: 'app/map-feature/map.module#MapModule',
    pathMatch: 'full'
   }]
 }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

core.module.ts：

import { NgModule, Optional, SkipSelf  } from '@angular/core';
import { LayoutModule } from './layout/layout.module';

@NgModule({
 imports: [
 // Layout Module (Sidenav, Toolbar)
 LayoutModule
 ],
 declarations: []
 })

 export class CoreModule {
 constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
 if (parentModule) {
  throw new Error(
    'CoreModule is already loaded. Imported in AppModule only.');
 }
 }
 }

layout.module.ts：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { MaterialModule } from '@app/shared/material.module';
import { ToolbarModule } from '../toolbar/toolbar.module';
import { SidenavModule } from '../sidenav/sidenav.module';
import { LayoutComponent } from './layout.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    MaterialModule,
    SidenavModule,
    ToolbarModule
 ],
 declarations: [LayoutComponent]
 })
 export class LayoutModule { }

地图routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MapComponent } from './map.component';

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

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MapRoutingModule {}

map.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';

import { MaterialModule } from '@app/shared/material.module';
import { MapRoutingModule } from './map-routing.module';
import { MapComponent } from './map.component';

@NgModule({
  imports: [
    CommonModule,
    MapRoutingModule,
    MaterialModule,
    LeafletModule.forRoot()
  ],
  declarations: [MapComponent]
   })
   export class MapModule { }

component.html

 <router-outlet></router-outlet>

layer.component.html

<mat-drawer-container class="layout-container">

 <mat-drawer-content class="drawer-content">

<div class="wrapper" fxFlex="grow" fxLayout="row">

  <!-- SIDENAV -->
  <sidenav class="sidenav"></sidenav>
  <!-- END SIDENAV -->

  <div class="content-wrapper" fxFlex="grow" fxLayout="column">
    <!-- TOOLBAR -->
    <toolbar></toolbar>
    <!-- END TOOLBAR -->

    <!-- CONTENT -->
    <div class="main-container" fxFlex="grow">
      <router-outlet></router-outlet>
    </div>
    <!-- END CONTENT -->

  </div>

</div>

儿童路线不起作用 - 覆盖父路线Angular 6

0 个答案: