Angularアプリ内のモジュールのネスト

Question

多くのコンポーネントを持つようになっているアプリを開発しています。私はコンポーネントを独立したモジュールに分割して、多くの多くのコンポーネントをリストするアプリケーションモジュールとコードが混乱しないようにしたいと思います。

私は複数のコンポーネントにわたって使用する予定のコンポーネントImageUploadComponentを持っています。

Productsに特に関連するすべてのコンポーネントをインポートして宣言するモジュールProductsModuleを作成しました。 app.moduleで

import { ProductsComponent }  from './products.component'; 
import { ProductDetailComponent } from './product-detail.component'; 

... 

@NgModule({ 
    declarations: [ 
     ProductsComponent, 
     ProductDetailComponent 
    ], 
    ... 
}) 
export class ProductsModule { } 

、私はProductsModuleとImageUploadComponentの両方をインポートします。

import { ProductsModule } from './products/products.module'; 
import { ImageUploadComponent } from './shared/image_upload.component'; 
... 
@NgModule({ 
    declarations: [ 
    ... 
    ImageUploadComponent, 
    ], 
    imports: [ 
    ... 
    ProductsModule, 
    ], 
    ... 
}) 
export class AppModule { ... } 

しかし、ProductsModuleはImageUploadComponentについて知らない、従ってでProductsComponent結果内ImageUploadComponentを使用しようとエラー。

どのようにコードをすべてのモジュールで共有コンポーネントを使用できるようにAngular2の別々のモジュールに分割するのですか？

私のバージョンAngularは2.1.1です。

Answer 1

ImageUploadComponentのモジュールを作成し、AppModuleとProductsModuleにインポートする必要があります。

が

import { ImageUploadComponent } from './shared/image_upload.component'; 
... 
@NgModule({ 
    declarations: [ 
    ImageUploadComponent, 
    ], 
    exports: [ 
    ... 
    ImageUploadComponent, // Here you dispose the component to other modules 
    ], 
    ... 
}) 
export class ImageUploadModule { ... } 

はなぜのみProductsModuleでそれをロードしません：あなたは別のモジュール内のコンポーネントを使用することができるようにするために

、あなたは、コンポーネントをエクスポートするようなものがありますか？ appModuleにロードしないと、インポートする各モジュールにImageUploadComponentというインスタンスが作成されます。

兄弟間ではない親モジュールと子供モジュールの間の角度共有インスタンス