angular - 如何在 Angular 2 中的模块之间共享组件？

Question

我对如何在 Angular 2 中的模块之间共享组件有疑问。重点是:我在应用程序中有两个模块，“客户模块”和“供应商模块”。

这两个模块在它们的组件中都使用了 AddressComponent 和 EmailComponent。他们还都使用地址和电子邮件接口(interface)。

现在，目前我有很多重复，因为我已经将这些组件和接口(interface)复制并粘贴到两个模块上。这是显然完全错误的。

我需要一种方法来导入要在两个模块上使用的那些组件。但我不知道该怎么做。

我是否应该为这个共享的东西创建另一个模块并将其导入到两个模块中？在 Angular 2 中的模块之间共享组件的正确方法是什么？

Answer 1

创建一个共享的NgModule，它将拥有所有通用的Component/Service/Pipe。通过这样做，您将避免代码重复。它将使代码模块化、可插入和可测试。

为了在其他模块中使用 AddressComponent 和 EmailComponent，您需要从共享模块中export它们:

代码

@NgModule({
   imports: [CommonModule],
   declarations: [AddressComponent, EmailComponent],
   providers: [MySharedService],
   exports: [AddressComponent, EmailComponent],
})
export class SharedModule { }

在使用 SharedModule 时，您所要做的就是导入 SharedModule

@NgModule({
   imports: [CommonModule, SharedModule, ... ],
   providers: [..]
})
export class CustomersModule { }