Verschachteln von Modulen in einer Angular App

Question

Ich entwickle eine App, die viele Komponenten enthält. Ich möchte die Komponenten in separate Module aufteilen, um zu vermeiden, dass das App-Modul viele Komponenten auflistet und der Code unorganisiert wird.

Ich habe eine Komponente, ImageUploadComponent, die ich über mehrere andere Komponenten verwenden möchte.

Ich habe ein Modul, ProductsModule, erstellt, das alle Komponenten importiert und deklariert, die sich speziell auf Produkte beziehen.

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

... 

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

In app.module importiere ich sowohl ProductsModule und ImageUploadComponent:

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

jedoch die ProductsModule weiß nicht, über den ImageUploadComponent und damit den ImageUploadComponent innerhalb der ProductsComponent Ergebnisse zu verwenden versuchen, in ein Fehler.

Wie kann ich meinen Code in Angular2 in separate Module aufteilen, so dass eine gemeinsame Komponente für alle Module verwendet werden kann?

Meine Version von Angular ist 2.1.1.

Answer 1

Sie müssen ein Modul für ImageUploadComponent erstellen und in AppModule und ProductsModule importieren.

für Sie in der Lage sein, eine Komponente in einem anderen Modul zu verwenden, müssen Sie die Komponente exportieren, so etwas wie:

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

Warum es nicht nur laden in ProductsModule? Wenn Sie es nicht in appModule laden, erhalten Sie eine Instanz von ImageUploadComponent in jedem Modul, das es importiert.

Angular share Instanzen zwischen Eltern und Kindern Module nicht zwischen Brüdern ..