Angular 2应用程序结构：循环模块依赖关系

2023年10月28日 453次阅读

在Angular 2样式指南中,建议使用目录结构：
https://angular.io/docs/ts/latest/guide/style-guide.html#04-06

我一般认为这是一个很好的建议,我打算自己做一些非常相似的事情.但是,我遇到了一个问题,我很好奇是否有人解决了它.

请注意,英雄模块包含一个带有heroes-button.component的共享目录.据推测,我们希望在整个应用程序中使用此组件(因此,“共享”).

同样,恶棍模块包含一个带有villains-button.component的共享目录.

如果我想在英雄模块中的某个地方使用villains-button.component,在恶棍模块中使用heroes-button.component,那么我最终会得到一个循环引用.

简而言之：Angular不允许我将ModuleA导入ModuleB,并将ModuleB导入ModuleA,但样式指南另有说明.

有没有人有这种情况的解决方案？

最佳答案 我的解决方案是将那些强制我具有循环依赖关系的组件(在本例中为villains-button.component和heroes-button.component)移动到Shared模块中.

最后,目录结构如下所示：

HeroesModule
    -HeroComponentA
    -HeroComponentB
VillainsModule
     -VillainComponentA
     -VillainComponentB
SharedModule
     -HeroButton
     -Villain Button    <-- these two are now available across the application

它可能感觉不对,因为您认为“Hero”按钮属于其他Hero的东西,但回想起随着我的应用程序的增长,我很高兴Angular禁止模块之间的循环依赖.随着应用程序的增长,这是一种非常危险的模式.

点赞