2016-08-10 16 views
11

angular2-appを新しいRC5に更新しています。 私は、異なるモジュール(ModuleA & ModuleB)の複数の他のコンポーネントにわたってコンポーネント( "ComponentA")を使用していましたが、これはまったく問題ありません。 。すぐにそれを使用するようモジュール間のAngular2 RC5共有コンポーネント

そのように、私が手に:ModuleAとModuleB:

キャッチされないタイプComponentAは2つのモジュールの 宣言の一部です!

エラー。

私の知る限り、これを回避するには、Shared-Moduleをすべて私の共通のものと一緒に使用するしかありません。モジュール間でコンポーネントを共有する方が簡単ですか?事前に

感謝:)

+0

[この](https://medium.com/@alihaghighatkhah/creating-a-shared-module-in-angular2-d281632316ff#.w0dpsvf48)の記事を参照してくださいあなたを助けるかもしれません。 – Reyraa

答えて

22

あなたが共有コンポーネントのためのモジュールを作成し、このコンポーネントを使用したい、このモジュールをインポートする必要があります。

エラーメッセージは、コンポーネント(または指令またはパイプ)が、ちょうど1つのモジュールのdirectivesにしかリストされていないことを示しています。

再利用する場合は、モジュールを使用するモジュールの@NgModule({imports: [...]})にそれを含むモジュールを追加する必要があります。

+0

私はそれが唯一の答えだと恐れていました..;)あなたの雷が速い応答ありがとうございました[すぐに受け入れますように] –

+1

いくつかのコード例ですか? – albanx

+2

https://angular.io/docs/ts/latest/guide/ngmodule.html –

4

すべての共有コンポーネントを含むモジュールを作成します。

これにより、他のモジュールにインポートするのがずっと簡単になります。

Proのヒント:モジュールにルーティングを入れ、楽しみのために試してみてください。そのうちの1つを遅延ロードしてみてください。

次に、あなたが思うよ:「whoaaaaaモジュールはcooooolllllある」

+0

Hehe、ありがとうございました。共有モジュールを追加した後、私はそれがプロであることに気がついた...結局、いいことだよ!レイジーローディングは、次にリストアップすることです。 –

+2

ヘルプがあれば、私はGithubでAngular2、Webpack2、Typescript2、Angular-Materialを使ったデモアプリを作成しました。私はすべてのマテリアルコンポーネントを共有ngModuleにまとめて使用しています。 Dockerコンテナ内でリポジトリを実行することもできます。 https://github.com/spock123/angular2-webpack2-typescript2 – Spock

+1

私はこのアプローチに従っています。私の共有モジュールは、私のヘッダーとフッターのコンポーネント。しかし、共有モジュールにはルーティングがないので、私は自分のヘッダにルータリンクを持つことができません。どのように修正するのですか?各モジュールに個別のヘッダーコンポーネントがありますか? – Boland

4

を共有モジュールを使用する必要があります。

SharedModuleは、他の多くのモジュールのコンポーネントのテンプレートで使用するために、一般的に使用されるコンポーネント、ディレクティブおよびパイプを作成するために存在します。

&をインポートしなければならない他のモジュールにインポートする必要があります。詳細は

リンクshared module

関連する問題