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