Angular Circular Module 导入 [英] Angular Circular Module import

问题描述

我有两个模块，它们的组件相互使用.所以我必须导入word"在测试"中和测试"在词"中-->抛出错误...我该怎么办?

模块测试":

 @NgModule({声明: [AppTest1组件，AppTest2Component，],进口:[应用词模块，],出口:[AppTest1组件，AppTest2Component，],})导出类 AppTestModule {}

模块单词":

 @NgModule({声明: [AppWord组件，],进口:[应用测试模块，],出口:[AppWord组件，],})导出类 AppWordModule {}

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

test1.html

word.html

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

解决方案

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

//组合模块

 @NgModule({进口:[通用模块，应用词模块，应用测试模块],声明:[CompositionComponent]，出口:[组合组件]})导出类 ComposeModule { }

//composition.component.html

 <app-child-one 标头><app-word body></app-word></app-child-one><app-child-two body><app-word body></app-word></app-child-two></app-word>

//AppWordModule

 @NgModule({进口:[通用模块],声明:[ WordComponent ]，出口:[ WordComponent ]})导出类 AppWordModule { }

//word.component.html

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

//AppTestModule

 const COMPONENTS = [ChildOneComponent,子组件]@NgModule({进口:[通用模块],声明: [...成分],出口:[...成分]})导出类 AppTestModule { }

//child-one.component.html

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

//child-two.component.html

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

I have two Modules with components which use each other. So I have to import "word" in "test" and "test" in "word" --> throw an error... How can I do ?

Module "test":

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

Module "word":

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

I import each other because of the template. The template of test1.component.ts calls word.component.ts et the template of word.component.ts calls test1.component.ts.

test1.html

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

word.html

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

I tried to use a SharedModule but I don't achieve it...

解决方案

Maybe you can use content projection with ng-content directive to compose nested components, but it depends how you need to compose them, in example

// ComposeModule

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

这篇关于Angular Circular Module 导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！