Общий модуль экспорта

Question

У меня есть определенные компоненты в модуле под названием "модуль кнопок", которые я хотел бы использовать в своем собственном пользовательском модуле под названием "модуль продуктов". Компонент в модуле кнопок является компонентом "раскрывающихся кнопок". Я знаю, что мне нужно создать файл общего модуля, а затем экспортировать эти компоненты в этот модуль. Но я немного сбит с толку, так как не знаю, создаю ли я общий модуль, тогда нужно ли мне добавлять эти компоненты в объявление обоих модулей, т. Е. Кнопок и модуля продуктов? Что было бы идеальным способом для моделирования файла общего модуля? вот мой код

buttons.module.ts

const components = [
  ButtonsComponent,
  DefaultButtonsComponent,
  HeroButtonComponent,
  ShapeButtonsComponent,
  SizeButtonsComponent,
  ActionGroupsComponent,
  DropdownButtonsComponent,
  BlockLevelButtonsComponent,
  ButtonGroupsComponent,
  IconButtonsComponent,
  LabeledActionsGroupComponent,
];

@NgModule({
  imports: [
    ThemeModule
  ],
  exports: [
    ...components,
  ],
  declarations: [
    ...components,
  ],
  providers: [],
})
export class ButtonsModule { }

products.module.ts

@NgModule({
    imports: [ 
        ThemeModule,
        NbCardModule,
        FormsModule,
        ProductsRoutingModule,
        // DropdownButtonsComponent,
    ],
    declarations: [
        ProductsComponent,
        AllproductsComponent,
        AddproductComponent,
    ]
})

export class ProductsModule { }

Answer 1

Нет, вы не можете добавить какой-либо компонент в список объявлений в двух модулях, это вызовет ошибку, вы можете создать модуль только для этого компонента и импортировать его в другие модули.

@NgModule({

  exports: [
    DropdownButtonsComponent,
  ],
  declarations: [
    DropdownButtonsComponent,
  ],
  providers: [],
})

export class DropdownButtonsModule { 
}

ButtonsModule

@NgModule({
  imports: [
    ThemeModule,
    DropdownButtonsModule 
  ],
  exports: [
    ...components,
  ],
  declarations: [
    ...components,
  ],
  providers: [],
})
export class ButtonsModule { }

ProductsModule

@NgModule({
    imports: [ 
        ThemeModule,
        NbCardModule,
        FormsModule,
        ProductsRoutingModule,
        DropdownButtonsModule ,
    ],
    declarations: [
        ProductsComponent,
        AllproductsComponent,
        AddproductComponent,
    ]
})

export class ProductsModule { }