我有一个具有以下结构的应用程序
app/
├── app.component.html
├── app.component.scss
├── app.component.ts
├── app.module.ts
├── core/
│ ├── core-routing.module.ts
│ ├── core.module.spec.ts
│ ├── core.module.ts
│ ├── header/
│ ├── layout/
│ ├── services/
│ └── header/
├── someModule1/
├── someModule2/
占据文件夹根目录的AppModule
尽可能保持裸露状态。它的作用只是引导Angular应用程序,并提供根级别的router-outlet
。
一切都贯穿CoreModule
。 CoreModule
路由如下(forRoot()):
const routes: Routes = [
{
path: 'app',
component: LayoutComponent,
},
{
path: 'somePath',
loadChildren: '../someModule1/someModule1.module#SomeModule1'
},
{
path: '**', component: NotFoundComponent
}
];
它允许我实例化LayoutComponent
,该内容具有通过主router-outlet
显示的内容和通过辅助命名插座显示的内容,以供其他组件显示。
<header-component></header-component>
<mat-drawer-container>
<mat-drawer #drawer>
<router-outlet name="sidenav"></router-outlet>
</mat-drawer>
<div class="sidenav-content">
<router-outlet></router-outlet>
</div>
</mat-drawer-container>
我尽了一切努力在sidenav和main-content区域中显示单独的内容,但没有成功。
我希望<a [routerLink]="['somepath', { outlets: { sidenav: ['foo'] } }]">Outlet Nav</a>
在somepath
中显示<router-outlet></router-outlet>
,在foo
中显示<router-outlet name="foo"></router-outlet>
我做错了什么?我读过它可能与延迟加载模块有关