问题描述
限时送ChatGPT账号..我有两个模块,它们的组件相互使用.所以我必须导入word"在测试"中和测试"在词"中-->抛出错误...我该怎么办?
模块测试":
@NgModule({声明: [AppTest1组件,AppTest2Component,],进口:[应用词模块,],出口:[AppTest1组件,AppTest2Component,],})导出类 AppTestModule {}
模块单词":
@NgModule({声明: [AppWord组件,],进口:[应用测试模块,],出口:[AppWord组件,],})导出类 AppWordModule {}
因为模板,我互相导入.test1ponent.ts的模板调用wordponent.ts,wordponent.ts的模板调用test1ponent.ts.
test1.html
word.html
我尝试使用 SharedModule 但我没有实现...
解决方案也许你可以使用 content使用 ng-content
指令组合嵌套组件的投影,但这取决于您需要如何组合它们,示例
//组合模块
@NgModule({进口:[通用模块,应用词模块,应用测试模块],声明:[CompositionComponent],出口:[组合组件]})导出类 ComposeModule { }
//compositionponent.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 { }
//wordponent.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-oneponent.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-twoponent.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 test1ponent.ts calls wordponent.ts et the template of wordponent.ts calls test1ponent.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 { }
// compositionponent.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 { }
// wordponent.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-oneponent.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-twoponent.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屋!
更多推荐
[db:关键词]
发布评论