모듈 2개 사이에 구성 요소 공유

모듈 2개 사이에 구성 요소 공유

저는 당신을 포함하려고 노력하고 있습니다.Component2개의 모듈(부모 및 자녀)로 구성되어 있지만 프로세스에서 여러 가지 오류가 발생합니다.

app.module.ts

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

아이.module.ts

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

앱을

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

어린아이

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

비동기식 문제에서 자식 모듈을 로드하고 있습니다.

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

아닐때importing아니면declaring에서ChildModule오류가 발생합니다.

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

****** 업데이트 *******

생성할 때FeatureModule, 일을 하기 위해서는SharedModuleComponents...update된 코드...를 내보내야 합니다.

공유 모듈

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

export class SharedModule {}

app.module.ts

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

아이.module.ts

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

완성도를 위해, Gunter의 대답에 따르면, a를 사용합니다.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],...
})

아이.module.ts

@NgModule({
    imports: [SharedModule]
})

갱신하다

imports는 구성 요소가 아닌 모듈용입니다.만약 그것이 잘 될 수 있을지 의문입니다.app.module공유 구성 요소를 내보냅니다.그것을 A로SharedModule아니면MyFeatureModule대신 이 모듈을 에 추가합니다.imports모듈이 내보내는 요소를 사용할 위치입니다.

원래의

하나의 구성요소만 추가할 수 있습니다.declarations정확히 하나의@NgModule()

해결 방법에 따라 구성 요소에 대한 새 모듈을 생성하고 새 모듈을 다음에 추가합니다.imports: [...]다른 두 모듈(사용할 위치) 중에서 선택할 수 있습니다.

https://github.com/angular/angular/issues/11481#issuecomment-246186173 도 참조

모듈의 구성요소 부분을 만들 때 컴파일 시 일련의 규칙을 부여합니다.NgModule에 속하지 않는 구성 요소를 갖는 것은 컴파일러가 컴파일할 수 없기 때문에 의미가 없습니다.구성 요소가 둘 이상의 모듈의 일부가 되는 것도 이상합니다. 컴파일 규칙을 선택한 모듈에 따라 다르다는 것입니다.그리고 이러한 구성 요소를 동적으로 로드할 경우 원하는 컴파일 규칙 집합이 모호해집니다.

위에서 언급한 이유로 각 구성 요소가 정확히 하나의 모듈에 속한다는 것을 제거하는 것은 절대 안 됩니다.

Shared Module을 만듭니다.SharedComponent를 선언하고 내보냅니다.

공유.module.ts

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

AppModule 및 기타 모듈에서 SharedModule 가져오기.

app.module.ts

  import { SharedModule } from './shared.module';
  @NgModule({
    imports: [
      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 ]
});

언급URL : https://stackoverflow.com/questions/39486029/share-component-between-2-modules