如何在 Angular 2 中的模塊之間共享組件？

Question

我對如何在 Angular 2 中的模塊之間共享組件存在疑問。重點是：我在應用程序中有兩個模塊，“客戶模塊”和“供應商模塊”。

這兩個模塊在它們的組件中都使用了 AddressComponent 和 EmailComponent。 它們也都使用地址和電子郵件接口。

現在，目前我有很多重復，因為我已經在兩個模塊上復制並粘貼了這些組件和接口。 這顯然是完全錯誤的。

我需要一種方法來導入要在兩個模塊上使用的組件。 但我不知道該怎么做。

我是否應該為此共享內容創建另一個模塊並將其導入？ 在 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 { }

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 將拋出錯誤：Type X(組件）是 2 個模塊聲明的一部分

Type X(component) 是 2 個模塊聲明的一部分

所以，為了解決這個問題，我們創建了一個共享模塊而不是共享一個組件，現在我們在所有其他模塊中共享這個模塊，為此我們使用 import 語句並在所有其他模塊中導入共享模塊之后，該組件將自動共享到所有模塊。

以下是如何執行此操作的示例：

共享模塊

@NgModule({ 導入: [ SomeModule ], 聲明: [ SharedComponent ], 導出: [ SharedComponent ] })

導出類 SharedMoule {} app.module.ts

import { SharedModule } from './shared/shared.module;

@NgModule({ 導入：[ SharedModule], ... })