Angular 模块结构

Question

我有一个后续模块

@NgModule({
  declarations: [
    AgPaginationComponent,
    AgGridNoRowsComponent,
    // a huge list of components
  ],
  exports: [AgPaginationComponent, AgGridModule],
  imports: [
    CommonModule,
    InputsModule,
    FormsModule,
    NgbPaginationModule,
    NgbPopoverModule,
    AgGridModule.withComponents([
      AgGridNoRowsComponent,
      // the same huge list from declarations
    ]),
    PipesModule,
  ]
})
export class MyAgGridAddonsModule { }

您在此处看到，可以通过在 withComponents 数组中指定组件列表来配置 AgGridModule。 MyAgGridAddonsModule 模块背后的想法是创建一个我可以在每次需要初始化 AgGridModule 时使用的模块。但事实证明模块增长太快并且在 AgGridModule.withComponents 声明下有太多组件。现在我希望有可能指定我想在每个特定时间使用哪些依赖项，但同时复制对每种情况都相同的基本配置。

我想完成类似的事情

@NgModule({
  imports: [
    MyAgGridAddonsModule.withComponents([
      MyAgInputFilter,
      MyAgLiveSearchFilter,
      MyAgSelectFilter,
      MyAgDateCellRenderer,
    ])
  ]
})
export class MyAnotherModule { }

MyAgGridAddonsModule.withComponents 中的组件数组应该传递给 MyAgGridAddonsModule:

@NgModule({
  declarations: [
    AgPaginationComponent,
    AgGridNoRowsComponent,
    // components passed down from MyAnotherModule
  ],
  exports: [AgPaginationComponent, AgGridModule],
  imports: [
    CommonModule,
    InputsModule,
    FormsModule,
    NgbPaginationModule,
    NgbPopoverModule,
    AgGridModule.withComponents([
      // components passed down from MyAnotherModule
      AgGridNoRowsComponent
    ]),
    PipesModule,
  ]
})
export class MyAgGridAddonsModule { }

有可能吗？谢谢。

Answer 1

您可以使用 static withComponents(c: any[]) 方法并使用 ANALYZE_FOR_ENTRY_COMPONENTS DI token (如果不使用 ivy)您的 MyAgGridAddonsModule 用于注册您将从其他模块传递的入口组件 -

// common ag grid entry components
const commonAgGridComponents: any[] = [RedComponentComponent];
@NgModule({    
  imports: [AgGridModule.withComponents(commonAgGridComponents)],
  exports: [AgGridModule]
})
export class AgGridCommonModule { 
  static withComponents(components: any[]) {
     return {
      ngModule: AgGridCommonModule,
      providers: [{
        provide: ANALYZE_FOR_ENTRY_COMPONENTS,
        useValue: components,
        multi: true
      }]
    };
  }
}

然后在您的 MyAnotherModule 中，通过传递额外的入口组件导入此 AgGridCommonModule -

@NgModule({
  imports:      [ AgGridCommonModule.withComponents(
            [GreenComponentComponent]
        ) ]
})
export class MyAnotherModule { }

请结帐this stackBlitz for AgGridModule . AgGridCommonModule 是 AgGridModule 的包装器，您可以在其中通过 withComponents() 方法从任何其他模块传递入口组件列表。