角度模塊結構

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令牌（如果不使用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 { }

請查看 AgGridModule 的 stackBlitz 。 AgGridCommonModule是AgGridCommonModule的包裝器，您AgGridModule在其中通過任何其他模塊的AgGridModule withComponents()方法傳遞入口組件列表。

Answer 2

我要做的是在WithComponents部分中定義共享組件，但對於其他組件，將它們定義為使用網格的 component.ts 中的frameworkComponents 。

如果你有一個網格組件，你知道它只會成為特定網格的一部分，你可以在組件的模塊中將它們聲明為普通組件。 如果組件可能會被另一個網格共享，您將需要創建一個模塊來導出要使用的組件，因為您不能在 2 個模塊中聲明相同的組件。 此共享模塊也可用於替換withComponents ，但需要在每個網格組件上額外綁定frameworkComponents ，這聽起來像是您試圖避免的。