我想将多个组件捆绑到一个模块(Widget1Module)中,然后将该模块注入另一个模块(AdminModule),使AdminModule中的所有组件都能访问Widget1Module中的组件.
我想这样做是为了避免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";
@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中,您需要导出要在AdminModule中使用的组件,例如:
import { CommonModule } from '@angular/common';
import { Widget1Component } from "./widget1.component";
@NgModule({
imports: [ CommonModule ],
declarations: [ Widget1Component ],
exports: [ Widget1Component ]
})
export class Widget1Module {}
这样,当您在AdminModule中导入Widget1Module时,Widget1Component将可用.