2017-01-09 5 views
7

모듈 사이에서 구성 요소를 각도 2로 공유하는 방법에 대해서는 의문이 있습니다. 요점은 다음과 같습니다. 앱에 '고객 모듈'과 '공급 업체 모듈'이라는 두 개의 모듈이 있습니다.각도 2의 모듈간에 구성 요소를 공유하는 방법은 무엇입니까?

이 두 모듈은 모두 해당 구성 요소에서 AddressComponent와 EmailComponent를 사용합니다. 그들은 또한 Address와 Email 인터페이스를 사용합니다.

현재 두 구성 요소와 인터페이스를 복사하여 두 모듈에 모두 붙여 넣었으므로 현재 중복되어 있습니다. 이것은 분명히입니다.

두 모듈에서 사용할 구성 요소를 가져 오는 방법이 필요합니다. 그러나 나는 그것을 어떻게하는지에 관해 모른다.

이 공유 항목에 대해 다른 모듈을 만들어 두 가지 모두에서 가져와야합니까? 각도 2의 모듈간에 구성 요소를 공유하는 올바른 방법은 무엇입니까?

답변

9

모든 공통점이 Component/Service/Pipe 인 공유 NgModule을 만듭니다. 이렇게하면 코드 중복을 피할 수 있습니다. 코드 모듈화, 플러그 가능 & 테스트 가능.

다른 모듈에 AddressComponent & EmailComponent을 사용하려면

, 당신은 공유 모듈에서 그들을 export해야합니다 SharedModule을 소모하면서

코드

@NgModule({ 
    imports: [CommonModule], 
    declarations: [AddressComponent, EmailComponent], 
    providers: [MySharedService], 
    exports: [AddressComponent, EmailComponent], 
}) 
export class SharedModule() { } 

, 당신이해야 할 모든 수입은 SharedModule

@NgModule({ 
    imports: [CommonModule, SharedModule, ... ], 
    providers: [..] 
}) 
export class CustomersModule() { } 
+1

이 작동하지 않습니다, 두 번 구성 요소를 선언 할 수 없습니다 생각 : http://stackoverflow.com/a/39927548/777285 –

+0

@ ArnaudP 머리에 대한 감사, 내가 중복 선언을 제거했다 감사합니다;) –

+0

실제로 그것은 다른 방법으로 : SharedModule은 구성 요소를 선언하는 유일한 모듈이어야합니다. 소비자는 SharedModule 만 가져와야합니다. –

관련 문제