共享組件moduls之間2

Question

我想包括Component在2個模塊（父母和子女），但得到的過程中的各種錯誤

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> 

我加載了ChildModule在異步事

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

當不importing或declaring在ChildModule我越來越錯誤：

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

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

創建FeatureModule時，爲了工作SharedModule應該導出組件... updateed代碼...

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 
}) 

Answer 1

更新

imports僅用於模塊，而不是組件。 我懷疑如果app.module導出共享組件，它會生效。使其成爲SharedModule或MyFeatureModule，並將此模塊添加到要使用模塊導出的元素的imports。

原

一個組成部分，只能加declarations的只有一個@NgModule()

至於解決方法爲該組件創建一個新的模塊和新模塊添加到其他兩個模塊的imports: [...]（在那裏你想用它）。

也https://github.com/angular/angular/issues/11481#issuecomment-246186173

When you make a component part of a module you impart on it a set of rules when it is compiled. Having a component without belonging to a NgModule is meaningless as the compiler can't compile it. Having a component be part of more then one module is also weird as you are saying that depending which module you chose the rules for compiling are different. And when you dynamically load such a component it would be ambiguous which set of compilation rules you wanted.

The idea of removing that each component belongs to exactly one module is a no-go for the reasons stated above.

Answer 2

請參見完整性，據岡特答案...使用SharedModule

**SharedModule** 

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

export class SharedModule {} 

app.module.ts

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

孩子。模塊。 TS

@NgModule({ 
    imports: [SharedModule] 
}) 

Answer 3

您必須在您的供應商共享組件：SharedModule的部分。 然後從派生模塊中，您只需導入SharedModule和賓果。

import { PagingInfoComponent } from './paging/paging.component'; 

    @NgModule({ 
     providers: [ PagingInfoComponent ], 
     declarations: [ ], 
     exports: [ ] 
    }) 

    export class SharedModule {} 

而且，您的派生模塊，

import { SharedModule } from '../location/to/shared.module'; 
@NgModule({ 
imports: [SharedModule ] 
}); 

Answer 4

中您也可以導出組件的更多，一旦和另一個模塊一個模塊，並在MyComponentB聲明例如MyComponentA。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-my-component', 
    templateUrl: './my.component.html' 
}) 
class MyComponent { 
    constructor() {} 
} 

export class MyComponentA extends MyComponent {} 
export class MyComponentB extends MyComponent {} 

Answer 5

創建一個SharedModule。聲明並導出SharedComponent。

shared.module.ts

中的AppModule和任何其他模塊

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

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

    ] 
}) 
export class SharedModule { } 

導入SharedModule。

app.module.ts

import { SharedModule } from './shared.module'; 
    @NgModule({ 
    imports: [ 
     SharedModule 
    ] 
    })