Angular 7多个路由器出口和延迟加载

时间:2018-11-14 10:36:41

标签: angular router angular7

我有一个具有以下结构的应用程序

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

一切都贯穿CoreModuleCoreModule路由如下(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>

我做错了什么?我读过它可能与延迟加载模块有关

0 个答案:

没有答案