Angular 5 循环依赖问题求助：模块互引组件触发循环依赖错误

嘿，这个循环依赖的坑我之前也踩过好几次，给你几个实际项目里常用的解决方案，你可以根据自己的场景选：

• 提取交叉组件到公共模块
  如果模块A和B里有互相依赖的组件，直接把这些组件抽出来放到独立的SharedModule（或者你自定义的公共模块）里，让A和B都去导入这个公共模块就行。这样就彻底打破了A→B→A的循环链，是最常用的解耦方式。

• 用惰性加载避开初始化时的循环
  如果你的模块是路由级别的，可以把其中一个模块改成惰性加载。这样应用初始化时两个模块不会同时被加载，自然就不会触发循环依赖报错。比如路由配置可以这么写：

  const routes: Routes = [
    { path: 'module-b', loadChildren: () => import('./module-b/module-b.module').then(m => m.ModuleBModule) }
  ];
  

• 通过服务中转交互逻辑
  如果只是组件之间需要交互，不一定非要直接导入对方组件。可以把共享的逻辑、状态或者事件放到一个服务里，让两个组件都依赖这个服务，而不是互相依赖。比如创建一个ComponentBridgeService，用Subject传递事件，A组件订阅、B组件触发，全程不需要互相导入。

• 动态导入组件（适合非模板场景）
  如果必须在ModuleA里用ModuleB的组件，试试动态导入代替顶部的静态导入。比如在组件需要使用的时机再导入：

  async ngOnInit() {
    const { TargetComponent } = await import('../module-b/target.component');
    // 这里可以用ComponentFactory动态创建组件
  }
  

  这个方法适合不需要在模板里直接引用，而是通过代码动态创建组件的场景。

• 重构组件职责
  有时候循环依赖本质是组件职责划分混乱导致的——比如一个组件既管自己模块的展示，又硬依赖另一个模块的业务逻辑。重新梳理下组件的核心职责，把跨模块的依赖部分拆分出来，让每个组件只专注自己的核心功能，从根源上减少交叉依赖。

内容的提问来源于stack exchange，提问作者AurelDbs