共享模块导出

Question

我想在名为 'products module' 的自定义模块中使用名为 'button module' 的模块中的某些组件。按钮模块中的组件是一个 'dropdown-buttons' 组件。我知道我必须创建一个共享模块文件，然后在该模块中导出这些组件。但是我有点困惑，因为我不知道如果我创建了一个共享模块，那么我是否还需要在两个模块（即按钮和产品模块）的声明中添加这些组件？什么是建模共享模块文件的完美方式？这是我的代码

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

按钮模块

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

产品模块

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

export class ProductsModule { }

共享模块导出

Shared Module exports

typescript

angular

shared-module