Angular 2：Circular Feature模块依赖项

发布时间：2020-12-17 06:59:30 所属栏目：安全来源：网络整理

导读：我目前正在研究Angular2的一个应用程序.我有3个功能模块,其中包含其他子功能模块. 我想将要素1的子要素模块加载到要素2的子要素模块中,反之亦然.下面是示例代码. 行动routing.module.ts const routes: Routes = [ { path: '',component: ActionComponent,chi

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

行动routing.module.ts

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

动作细节routing.module.ts

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

话题routing.module.ts

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

决策主题的细节routing.module.ts

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

这会在编译时超出最大调用堆栈大小时创建循环依赖并抛出ERROR错误.

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

提前致谢.

解决方法

路由应该位于与组件分开的位置,并且在模块外部声明这些组件.

在最长的时间里,我也遵循了你正在使用的模式. topic-routing.module.ts似乎应该与主题组件一起使用.但最近我开始以不同的方式思考它,你的难题在这里完美地突出了这一点.

我已经开始将路由视为给定应用程序的核心.当我开始编写第二个应用程序并决定重用我在第一个应用程序中编写的许多组件/模块时,就发生了这种范式转换.我注意到重用的唯一事情就是路线.

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

有鉴于此,我建议如下：

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

这可能看起来违反直觉,并且您失去了“垂直”分组,其中所有主题内容与主题一起存在,并且所有动作内容与动作一起生效.但是当你把路线视为一种根本不同的动物而不是它们所指的组件时,它就不那么痛苦了,它肯定能解决你的问题.

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)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!