web-dev-qa-db-ja.com

Angular 2？のモジュール間でコンポーネントを共有する方法は？

Angular 2.のモジュール間でコンポーネントを共有する方法に疑問があります。ポイントは、アプリに2つのモジュール、「Customers Module」と「Suppliers Module」があることです。

これらのモジュールは両方とも、コンポーネントで、AddressComponentとEmailComponentを使用します。また、両方ともアドレスと電子メールのインターフェースを使用します。

現在、これらのコンポーネントとインターフェイスを両方のモジュールにコピーして貼り付けたため、現在、多くの重複があります。これは明らかにただの間違いです。

両方のモジュールで使用されるコンポーネントをインポートする方法が必要です。しかし、私はそれを行う方法がわかりません。

この共有アイテム用に別のモジュールを作成し、両方にインポートする必要がありますか？ Angular 2のモジュール間でコンポーネントを共有する正しい方法は何ですか？

angularcomponentsweb-component
12
user1620696

すべての共通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() { }
16
Pankaj Parkar

Angular2で複数のモジュールにコンポーネントを共有する方法

やあみんな、

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

それが使用されるすべてのビューでどこでも同じコードを繰り返します。または、共通のコンポーネントを作成して、他のすべてのビューと共有できます

繰り返されるビューの機能がどこでも同じである場合、コードを繰り返すことはベストプラクティスではありません。私の意見では、共通のコンポーネントを作成し、それをすべての異なるビュー/モジュールに適用することは素晴らしいアイデアであり、コードの冗長性を減らしてアプリケーションを作成しますきちんときれいに、また何かが変更された場合は、1つのコンポーネントでのみ変更する必要があります。

しかし、どうすればAngular 2アプリケーションでこれを実現できますか？

Angular 2であるため、モジュール設計パターンに従います。つまり、異なるモジュールで異なるビューを保持しますが、問題は単一のコンポーネントを異なるモジュールで共有する方法ですか？

Angular 2では、単一のコンポーネントを異なるモジュールにインポートすることはできません。これを実行しようとすると、コンポーネントをすべてのモジュール内にインポートするだけでは、コンポーネントを異なるモジュールに共有できません。 Angularはエラーをスローします：タイプX(component)は2つのモジュールの宣言の一部です

タイプX(component)は2つのモジュールの宣言の一部です

したがって、この問題を解決するために、コンポーネントを共有する代わりに共有モジュールを作成します。このため、このモジュールを他のすべてのモジュールで共有し、importステートメントを使用して、コンポーネントが自動的に共有された後、他のすべてのモジュールで共有モジュールをインポートしますすべてのモジュール。

以下は、その方法の例です。

SharedModule

@NgModule（{インポート：[SomeModule]、宣言：[SharedComponent]、エクスポート：[SharedComponent]}）

エクスポートクラスSharedMoule {} app.module.ts

'./shared/shared.moduleから{SharedModule}をインポートします。

@NgModule（{imports：[SharedModule]、...}）

1
gnganpath