Angular 2：循环特征模块依赖

Question

我目前正在开发 Angular2 的一个应用程序。我有 3 个功能模块，其中包含其他子功能模块。 我想将功能 1 的子功能模块加载到功能 2 的子功能模块中，反之亦然。下面是示例代码。

action-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: ActionComponent,
        children: [
          {
           path: ':id',
           loadChildren: 'app/action/action-detail/action-detail.module#ActionDetailModule'
          }
        ]
     }
];

action-detail-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: ActionDetailComponent,
    },    
    {
        path: 'topic-detail/:id',
        loadChildren: 'app/topic/decision-topic-detail/decision-topic-detail.module#DecisionTopicDetailModule',
    }
]

topic-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: TopicComponent,
        children: [
          {
           path: ':id',
           loadChildren: 'app/topic/decision-topic-detail/decision-topic-detail.module#DecisionTopicDetailModule'
          }
        ]
     }
];

decision-topic-detail-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: DecisionTopicDetailComponent,
    },    
    {
        path: 'action-detail/:id',
        loadChildren: 'app/action/action-detail/action-detail.module#ActionDetailModule'
    }
]

这会创建循环依赖并在编译时抛出 ERROR in Maximum call stack size exceeded 错误。

有什么办法可以解决这个错误。我知道一种方法是自行加载整个功能模块，但这是不可行的情况。

提前致谢。

Answer 1

路由应该位于与组件分开的地方，并且位于声明这些组件的模块之外。

很长一段时间以来，我也遵循您使用的模式。 topic-routing.module.ts 似乎 它应该与 topic 组件一起使用。但最近我开始从不同的角度思考它，而你在这里的难题完美地突出了这一点。

我已经开始将routes 视为给定应用程序的核心。这种范式转变发生在我开始编写第二个应用程序并决定重用我在第一个应用程序中编写的许多组件/模块时。我注意到唯一没有意义的东西是路由。

就好像路由定义了“应用程序”，模块/组件是任何给定应用程序使用的构建块。

鉴于此，我会推荐以下内容：

将您的路线定义从每个模块移到顶级应用程序中。它们可以位于 app.routes 旁边的目录中，您可以将它们分布在它们当前的文件中，或者如果您没有那么多，您可以将它们合并到同一个文件中。

这似乎违反直觉，并且您失去了“垂直”分组，其中所有topic 内容与主题一起存在，所有action 内容与动作一起存在。但是，当您将路线视为与它们所指的组件完全不同的动物时，它就不那么痛苦了，而且肯定会解决您的问题。

src
  |-app.component.ts
  |-app.component.html
  |-app.routes.ts  <-- includes the routes in the sibling directory
  |-routing
      |- action.routes.ts
      |- action-detail.routes.ts
      |- topic.routes.ts
      \- decision-topic-detail.ts
  |-decision-topic-detail (module)
  |-topic (module)
  \-action (module)