Angular，公开 lazy-loaded 模块中的组件

Question

我的应用有 LazyModule，即 lazy-loaded，还有 RootModule，其中 lazy-loads 这个。

当应用程序导航到特定路线时，LazyModule 将 lazily 在 [=53= 的 <router-outlet> 处呈现其组件]RootModule`s 组件，而其他 <router-outlet>s 将通过路由配置中的 component 属性公开组件。

root.component.html:

<!-- super-simplified version -->
<router-outlet name="header"></router-outlet>
...
<router-outlet name="side"></router-outlet>
...
<router-outlet></router-outlet> <!-- primary -->

root.component.ts:

export class RootComponent {
  ...
  // called from somewhere...
  doNavigate() {
    this.route.navigate({outlets: {primary: 'hero', top: 'hero-header', side: 'hero-nav'}})
  }
  ...
}

root.routing.module.ts（路由配置）：

  { path: 'hero', loadChildren: 'app/hero#LazyHeroModule' },
  { path: 'hero-header', component: HeroHeaderComponent, outlet: 'top' },
  { path: 'hero-nav', component: HeroNavComponent, outlet: 'side' }
  // components from 2nd, 3rd lines are declared in *RootModule*

棘手的部分是那些 route-config-components 与 LazyModule 语义相关。（他们都是hero-related）。

我觉得 HeroHeaderComponent 和 HeroNavComponent 不是 LazyHeroModule 的一部分，而是 RootModule 的一部分，这在我看来很难看。（我说的对吗？？）

我有更多 lazy-loaded 行为类似于 LazyModule 的模块：每个模块都有相应的 apart-from-family 组件 在 RootModule:

中声明

  // config continues...
  { path: 'villain', loadChildren: 'app/villain#LazyVillainModule' },
  { path: 'villain-header', component: VillainHeaderComponent, outlet: 'top' },
  { path: 'villain-nav', component: VillainNavComponent, outlet: 'side' }
  // components from 2nd, 3rd lines are declared in *RootModule*

如果这种路由配置比较多，我觉得留下root.component.html 托管不同流派的数据是合适的。（英雄-或villain-related）。

要说清楚，我认为情况的根源是：

我不想触及 RootComponent 的结构，例如它承载 header、侧面和内容的方式。
所有流派都有自己的一套界面，例如英雄流派有hero-header、hero-side、hero-content、……等等，反派流派也有相应的。
- 一个流派的界面A的内部结构与另一个流派的不同。
流派的某些接口（组件）涉及 lazy-loaded 模块。（出于某种原因）但我希望其他不需要 lazy-loaded 模块的接口像其他接口一样加载到 bootstrap eager-loaded 模块中的组件。

这里是问题：

有没有可能lazy-load模块将那些与自身有语义关系的组件打包在一起？

不管是否正确，我是否正确地解决了给定的问题？

这个问题越具体越糊涂！

Answer 1

我和你有同样的感觉，当前的架构有问题。我会把所有英雄的东西都放在英雄模块中。因此，如果 HeroModule 是延迟加载的，那么所有这些东西（HeroHeader 和 HeroNav）也将是延迟加载的。

所以我将在 RootComponent 中有一个单独的出口，并且在其中加载的每个模块中，我将拥有顶部和侧面以及主要的子出口。

Angular，公开 lazy-loaded 模块中的组件

Angular, exposing components in lazy-loaded module

lazy-loading

angular

angular-router