Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
841 views
in Technique[技术] by (71.8m points)

angular - Share Component between 2 modules

I'm trying to include a Component in 2 modules (parent and child) but getting various errors in the process

app.module.ts

@NgModule({
    declarations: [SharedComponent],
    exports: [SharedComponent]...
})    

child.module.ts

@NgModule({
    imports: [SharedComponent], //Unexpected directive imported by module
})  

app.html

<div class="container">
    <shared-selector></shared-selector>
    <child-selector></child-selector>
</div>

child.html

<div>
    content
    <shared-selector></shared-selector>
</div>

I'm loading the ChildModule in Async matter

loadChildren: 'app/child.module#ChildModule',

When not importing or declaring in the ChildModule I'm getting the error:

template parse error: shared-selector is not a known element

****** UPDATE *******

when Creating FeatureModule, in order to work the SharedModule should export the Components...updateed code...

SharedModule

@NgModule({
    imports: [
        CommonModule
     ],
    declarations: [
         SharedComponent
    ],
    exports: [
        SharedComponent
    ]
})

export class SharedModule {}

app.module.ts

@NgModule({
    imports: [ChildModule, SharedModule],...
})    

child.module.ts

@NgModule({
    imports: [SharedModule], //Unexpected directive imported by module
})  
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

For completeness, according to Gunter's answer, use a SharedModule:

SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

app.module.ts

@NgModule({
    imports: [ChildModule, SharedModule],...
})

child.module.ts

@NgModule({
    imports: [SharedModule]
})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...