角圆形模块导入答案

【问题标题】：Angular Circular Module import角圆形模块导入
【发布时间】：2019-02-22 20:13:33
【问题描述】：

我有两个模块，其中的组件相互使用。所以我必须在“test”中导入“word”，在“word”中导入“test”-->抛出错误......我该怎么办？

模块“测试”：

    @NgModule({
      declarations: [
        AppTest1Component,
        AppTest2Component,
      ],
      imports: [
        AppWordModule,
      ],
      exports: [
        AppTest1Component,
        AppTest2Component,
      ],
    })
    export class AppTestModule {
    }

模块“单词”：

    @NgModule({
      declarations: [
        AppWordComponent,
      ],
      imports: [
        AppTestModule,
      ],
      exports: [
        AppWordComponent,
      ],
    })
    export class AppWordModule {
    }

因为模板，我互相导入。 test1.component.ts的模板调用word.component.ts，word.component.ts的模板调用test1.component.ts。

test1.html

    <div class="app-word"></div>

word.html

    <div class="app-test1"></div>

我尝试使用 SharedModule 但没有实现...

【问题讨论】：

你不能有循环依赖。您至少需要分解其中一个模块才能打破这种循环依赖关系。
这似乎是一个糟糕的架构。为什么模块 A 需要模块 B 而模块 B 需要 A ？
您的代码正在创建循环依赖。将这两个模块导入appmodule。并从 module 中删除导入模块
是的，我知道它是循环依赖...架构非常复杂，所以我真的别无选择。我尝试将它们都导入到父模块（应用程序模块）中，但它不起作用：“[...] 它不是 'app-word' 的已知属性”
为什么不创建一个包含两个组件的 SharedModule，然后在 test 和 word 模块中导入 sharedmodule？那会奏效的。

标签： angular import module circular-dependency

【解决方案1】：

也许您可以使用 content projection 和 ng-content 指令来组合嵌套组件，但这取决于您需要如何组合它们，in example

// 组合模块

    @NgModule({
      imports: [
        CommonModule,
        AppWordModule,
        AppTestModule
      ],
      declarations: [CompositionComponent],
      exports: [CompositionComponent]
    })
    export class ComposeModule { }

// composition.component.html

    <app-word>
      <app-child-one header>
        <app-word body>
        </app-word>
      </app-child-one>
      
      <app-child-two body>
        <app-word body>
        </app-word>
      </app-child-two>
    </app-word>

// AppWordModule

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [ WordComponent ],
      exports: [ WordComponent ]
    })
    export class AppWordModule { }

// word.component.html

    <div class="header">
      <h2>app-word:header</h2>
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <h2>app-word:body</h2>
      <ng-content select="[body]"></ng-content>
    </div>

// AppTestModule

    const COMPONENTS = [
      ChildOneComponent,
      ChildTwoComponent
    ]
    
    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [
        ...COMPONENTS
      ],
      exports: [
        ...COMPONENTS
      ]
    })
    export class AppTestModule { }

// child-one.component.html

    <div class="header">
      <h2>app-child-one:header</h2>
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <h2>app-child-one:body</h2>
      <ng-content select="[body]"></ng-content>
    </div>

// child-two.component.html

    <div class="header">
      <h2>app-child-two:header</h2>
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <h2>app-child-two:body</h2>
      <ng-content select="[body]"></ng-content>
    </div>

【讨论】：

【解决方案2】：

您需要从架构上解决问题。

您可以创建一个具有这两种功能的模块......因为它们看起来如此紧密地耦合，这将是我的首选，或者您可以进一步分解模块，以便一个模块的功能需要由其他人在他们自己的模块中。

【讨论】：