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

我想创建一个可以在任何 'declaration' 模块中使用的组件 (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 中包含的小部件的错误。

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 将可用。

Angular2，包含组件模块而不是单独包含所有组件

Angular2, Include module of components rather than all components separately

typescript

angular2-modules

angular