带有多个路由器出口的Angular 7 LazyLoading

Question

我正在尝试构建一个包含多个子应用程序的 Angular7 应用程序。下图显示了示例。 App scheme

app.comonent.html 包含“根” <router-outlet>。该出口懒惰通过 app.routing.ts

加载子应用

每个子应用程序都由一个子模块表示。 每个子模块包括：

1. 子应用程序“根”组件（app-cats.component.html）
2. 子应用路由器
3. 子应用程序组件

app.routing.ts 源代码：

const routes: Routes = [
  {
    path: '',
    loadChildren: './cats/cats.module#CatsModule'
  },
  {
    path: 'cats',
    loadChildren: './cats/cats.module#CatsModule'
  },
  {
    path: 'dogs',
    loadChildren: './dogs/dogs.module#DogsModule'
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app-cats.routing.ts 源代码：

const routes: Routes = [
  {
    path: '',
    component: CatsContentComponent1
  },
  {
    path: '1',
    component: CatsContentComponent1
  },
  {
    path: '2',
    component: CatsContentComponent2
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CatsRoutingModule { }

当我懒加载子模块时，我希望它的所有组件（在 <submodule_name>。module.ts 中注册）都被加载。 例如，如果我访问此页面： http://.../cats，我想延迟加载cats模块及其所有已注册组件。 但是，当我稍后尝试访问http://.../cats/2时，整个页面将再次重新加载（立即显示预加载的组件CatsContentComponent2的内容。

有人知道我每次加载子模块时如何完成该工作吗？ 与<router-outlet>没有 name 属性有关吗？

我非常感谢一个示例项目，演示了解决方案。

非常感谢。