Angular Circular Module 导入

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。

测试1.html

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

字.html

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

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

Answer 1

也许您可以使用带有指令的内容投影ng-content来组合嵌套组件，但这取决于您需要如何组合它们，例如

// 撰写模块

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

// 组成.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>

// 应用词模块

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

// 应用测试模块

    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>