Angular2, Module von Komponenten und nicht alle Komponenten separat einschließen

Question

Ich möchte mehrere Komponenten in ein Modul (Widget1Module) bündeln und dieses Modul dann in ein anderes Modul (AdminModule) einspeisen, wodurch alle Komponenten in AdminModule Zugriff auf die Komponenten erhalten die Widget1Module.

Ich möchte dies zu vermeiden ist die declarations Array in der AdminModule von groß und unübersichtlich, siehe unten für eine tiefergehende Erklärung meines Problems.

Ich habe eine Moduldatei, so wie:

import { CommonModule } from '@angular/common'; 
import { RoutingModule } from './admin-routing.module'; 

import { Declaration1 } from "./declaration1.component"; 
import { Declaration2 } from "./declaration2.component"; 
import { Declaration3 } from "./declaration3.component"; 

    @NgModule({ 
    imports: [ 
     CommonModule, 
     RoutingModule, 

    ], 
    declarations: [ 
     Declaration1, 
     Declaration2, 
     Declaration3, 
    ] 
    }) 

export class AdminModule {} 

Ich mag würde eine Komponente (Widget1Component) erzeugen, die innerhalb jeder der ‚Erklärung‘ Module verwendet werden können. Ich weiß, dass ich etwas tun könnte:

import { CommonModule } from '@angular/common'; 
import { RoutingModule } from './admin-routing.module'; 

import { Declaration1 } from "./declaration1.component"; 
import { Declaration2 } from "./declaration2.component"; 
import { Declaration3 } from "./declaration3.component"; 

import { Widget1 } from "./widget1.component"; 

    @NgModule({ 
     imports: [ 
      CommonModule, 
      RoutingModule, 

     ], 
     declarations: [ 
      Declaration1, 
      Declaration2, 
      Declaration3, 
      Widget1 
     ] 
     }) 

    export class AdminModule {} 

Welche funktionieren würde, aber wie diese Anwendung wächst, würde ich alle Widgets in ein anderes Modul bündeln zu können, wie, und dann das Modul in dieses Modul injizieren, so wie:

import { CommonModule } from '@angular/common'; 
import { RoutingModule } from './admin-routing.module'; 

import { Declaration1 } from "./declaration1.component"; 
import { Declaration2 } from "./declaration2.component"; 
import { Declaration3 } from "./declaration3.component"; 

import { Widget1Module } from "./widget1.module"; 

    @NgModule({ 
     imports: [ 
      CommonModule, 
      RoutingModule, 
      Widget1Module 
     ], 
     declarations: [ 
      Declaration1, 
      Declaration2, 
      Declaration3 
     ] 
     }) 

    export class AdminModule {} 

Aber, wenn ich versuche, so etwas zu tun, ich bekomme immer wieder den Fehler, dass die Anwendung nicht weiß, über die Widgets in der Widget1Module enthalten.

Answer 1

In Ihrem Widget1Module Sie müssen Export Komponenten, die Sie zum Beispiel in AdminModule, verwenden möchten:

import { CommonModule } from '@angular/common'; 
import { Widget1Component } from "./widget1.component"; 

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

export class Widget1Module {} 

diese Weise, wenn Sie Widget1Module in AdminModule importieren, Widget1Component zur Verfügung stehen wird.