Angular2，包括組件模塊而不是所有組件

Question

我想將多個組件捆綁到一個模塊（ Widget1Module ）中，然后將該模塊注入另一個模塊（ AdminModule ），使AdminModule所有組件都能訪問Widget1Module的組件。

我想這樣做是為了避免AdminModule的declarations數組變得越來越大且難以管理，請參閱下面的更深入的解釋我的問題。

我有一個像這樣的模塊文件：

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

我想創建一個可以在任何“聲明”模塊中使用的組件（ Widget1Component ）。 我知道我可以這樣做：

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

哪個會起作用，但隨着這個應用程序的增長，我希望能夠將所有小部件捆綁到另一個模塊中，然后將該模塊注入到這個模塊中，如下所示：

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

但是，當我嘗試做這樣的事情時，我不斷收到應用程序不知道Widget1Module包含的小部件的Widget1Module 。

Answer 1

在Widget1Module您需要導出要在AdminModule使用的組件，例如：

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

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

export class Widget1Module {}

這樣，當您在AdminModule導入Widget1Module時， Widget1Component將可用。