Дочерние маршруты не работают - переопределение родительского маршрута Angular 6 - PullRequest
Новая
       18

Дочерние маршруты не работают - переопределение родительского маршрута Angular 6

0 голосов
/ 13 мая 2018

У меня есть основной модуль с компонентом макета, который включает в себя модуль панели инструментов и модуль 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 { }

map-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>

...