时间戳

首页 > 解决方案 > Angular 7 多个路由器出口和延迟加载

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

问题描述

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

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 和主要内容区域显示单独的内容，但没有任何成功。

我希望在里面和里面<a [routerLink]="['somepath', { outlets: { sidenav: ['foo'] } }]">Outlet Nav</a>展示somepath<router-outlet></router-outlet>foo<router-outlet name="foo"></router-outlet>

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

标签： angularrouterangular7

解决方案

推荐阅读