[英]Angular, exposing components in lazy-loaded module
My app has LazyModule , that is lazy-loaded, and also RootModule , which lazy-loads this. 我的应用程序有LazyModule ,它是延迟加载的,还有RootModule ,它是延迟加载的。
When the app navigates to certain route, LazyModule will lazily render its component at <router-outlet>
of RootModule `s component while the other <router-outlet>
s will expose components by the component
property in the route config. 当应用程序导航到某些路线,LazyModule 懒惰地将其呈现在组分
<router-outlet>
RootModule`S成分,而另一<router-outlet>
旨意通过暴露部件component
在路径配置属性。
root.component.html: 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: 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 (route config): 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*
The tricky part is that those route-config-components are semantically related to LazyModule . 棘手的部分是那些route-config-components在语义上与 LazyModule 有关 。 (They are all hero-related).
(它们都是与英雄有关的)。
It seems ugly to me that HeroHeaderComponent
and HeroNavComponent
are not part of LazyHeroModule
, but part of RootModule
. 这似乎难看,我认为
HeroHeaderComponent
和HeroNavComponent
不是的一部分LazyHeroModule
,但部分RootModule
。 (Am I right??) (我对吗??)
I have more lazy-loaded modules that behave similar to LazyModule : Each one of those has corresponding apart-from-family components declared in RootModule : 我有更多的延迟加载模块,它们的行为类似于LazyModule :每个模块都有在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*
If these kind of route configs exists more, I think it is proper to leave root.component.html
hosting data from different genres. 如果存在更多此类路由配置,我认为保留
root.component.html
托管来自不同流派的数据是适当的。 (hero- or villain-related). (与英雄或小人有关)。
To make it clear, the root of the situation, I think, is that: 为了明确起见,我认为这种情况的根源是:
RootComponent
, eg the way it hosts header, side and content. RootComponent
的结构,例如它托管标头,内容和内容的方式。 Here is the question: 这是问题:
Is it possible that lazy-load module bundle up those components which have semantic relationship to itself? 惰性加载模块是否有可能捆绑那些与其自身具有语义关系的组件?
Whether it is or not, Am I approaching the given problem correctly? 不管是不是, 我是否正确地解决了给定的问题?
The more concretely I write this question, the more I get confused! 我写的这个问题越具体,我就越困惑!
I have the same feeling you do, that something is wrong with the current architecture. 我有种与您相同的感觉,即当前的体系结构有问题。 I would put all of the hero stuff in the Hero module.
我会将所有英雄内容放入“英雄”模块中。 So if HeroModule is lazy loaded, all that stuff (HeroHeader and HeroNav) will be lazy-loaded too.
因此,如果HeroModule是延迟加载的,那么所有这些东西(HeroHeader和HeroNav)也将被延迟加载。
So I would have a single outlet in RootComponent, and in each of the modules that get loaded within it, I would have the top and side as well as the primary children outlets. 因此,我在RootComponent中将有一个出口,在其中加载的每个模块中,我将具有顶部和侧面以及主要的子出口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.