Angular 圆形模块导入

Question

我有两个模块，其中的组件相互使用。所以我必须在“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 但我没有实现它......

Answer 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>