如何在Angular2中将组件共享到多个模块

Question

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

这些模块在其组件中都使用了AddressComponent和EmailComponent。他们也都使用接口地址和电子邮件。

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

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

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

Answer 1

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

为了使用AddressComponent＆amp; 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() { }

Answer 2

如何在Angular2中将组件共享到多个模块

伙计们，

In every application some times there were some views which are repeated in the whole application, and for that we have two option:

我们要么在将要使用它的所有视图中的任何地方重复相同的代码。或者我们可以创建一个通用组件并将其共享给其他所有视图

如果重复视图的功能在所有地方都是相同的，那么重复代码不是最佳实践，我认为创建一个通用组件并将其应用于所有不同的视图/模块是一个好主意，它可以减少代码冗余并使我们的应用程序简洁整洁，如果某些内容发生更改，则只需在一个组件中进行更改。

但是我们如何在Angular 2应用程序中实现呢？

由于在Angular 2中我们遵循模块化设计模式，这意味着我们在不同的模块中保留不同的视图，但是问题是我们如何才能将单个组件共享到不同的模块？

我们不能仅通过在所有模块中导入一个组件来共享一个组件，因为Angular 2不允许我们将单个组件导入到不同的模块中，如果尝试这样做，那么Angular会抛出错误： X（组件）类型是2个模块的声明的一部分

X（组件）类型是2个模块的声明的一部分

因此，为了解决此问题，我们创建了一个共享模块而不是共享组件，现在我们在所有其他模块中共享此模块，为此，我们使用import语句，并在此组件获取后在所有其他模块中导入共享模块自动共享给所有模块。

以下是操作方法示例：

SharedModule

@NgModule（{ 进口：[ 一些模块 ]，声明：[ 共享组件 ]，出口：[ 共享组件 ] }）

导出类SharedMoule {} app.module.ts

从'./shared/shared.module导入{SharedModule};

@NgModule（{ 导入：[SharedModule]， ... }）

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

2 个答案:

如何在Angular2中将组件共享到多个模块