Angular2 应用程序结构：循环模块依赖

Question

在 Angular 2 Style Guide 中，推荐了一个目录结构：https://angular.io/docs/ts/latest/guide/style-guide.html#04-06

我总体上认为这是一个很好的建议，我打算自己做一些非常相似的事情。但是，我运行遇到了一个问题，我很好奇是否有人解决了它。

注意 heroes 模块包含 shared 目录和 heroes-button.component。据推测，我们希望在整个应用程序中使用此组件（因此，"shared"）。

同样，villains 模块包含一个带有 villains-button.component.

的 shared 目录

如果我想在heroes模块的某个地方使用villains-button.component，在villains模块的某个地方使用heroes-button.component，那么我就结束了循环引用。

简而言之：Angular 不允许我将 ModuleA 导入 ModuleB，以及将 ModuleB 导入 ModuleA，但样式指南另有说明。

有没有人对这种情况有任何解决方案？

Answer 1

我的解决方案是将那些迫使我产生循环依赖的组件（在本例中是反派-button.component 和英雄-button.component）移动到共享模块中。

最后的目录结构是这样的：

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

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

Angular2 应用程序结构：循环模块依赖

Angular 2 Application Structure: Circular Module Dependencies

angular2-modules

angular