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

共享模块导出

1 个答案: