角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'
    }
]

这会造成循环依赖，并在编译时抛出最大调用堆栈大小超过的错误。

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

提前谢谢。

Answer 1

路由应该生活在一个独立于组件的地方，并且在那些组件声明的模块之外。

在很长一段时间里，我也遵循了你所使用的模式。topic-routing.module.ts似乎应该与topic组件共存。但最近，我开始用不同的角度来思考这个问题，你的难题正好突出了这一点。

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

就好像路线定义了"app“，模块/组件是任何特定应用程序将要使用的构建块。

有鉴于此，我建议如下：

将您的路由定义从每个模块移到顶级应用程序中。它们可以驻留在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)