Angular2コンポーネントとそのサブコンポーネントがサービス中のngModelの単一インスタンスにアクセスするのを許可します

Question

私は、多くの機能を備えた複雑なビューを構築しています。物事を整理するために、私はそれをいくつかのカスタムコンポーネントに分割しました。

私はそれが働いているように、この短い説明をしようとしますが、私はそれが "正しい方法"であると想像できません。

構造：

- AppComponent(has binding to dataModel) 
--LayoutComponent 
---HeaderComponent 
---SideMenuComponent 
---MainContentComponent 

Iは、データ・モデルの同じ単一のインスタンスにアクセスし、これらの構成要素の各々を与えることができる必要があります。しかし、サービスをプロバイダとして追加し、各コンポーネントのコンストラクタに追加すると、データの新しいインスタンスが生成されます。あるコンポーネントで行われた編集は、別のコンポーネントのデータに反映されません。

私がしたことは、dataModelへのコンポーネントアクセスを最上位の親に与えることでした。[(dataModel)]="dataModel"をチェーンに渡しました。

次に、各コンポーネントにnullとして始まる変数dataModelを追加しましたが、テンプレートを作成した後、その変数にバインドします。

これは、各コンポーネントの入力を同じフィールドdataModel.nameにバインドすることができます。これを更新すると、すべてのコンポーネントが変更を反映します。

これはきれいなやり方ではないようです。どんな助けもありがとう。

Answer 1

すべてのコンポーネントのプロバイダにサービスを追加すると、すべてのコンポーネントが独自のサービスインスタンスを取得します。 Angular2 DIはプロバイダーごとに1つのインスタンスを保持します。

コメント祖先のプロバイダに追加すると、このコンポーネントとすべての子孫がこのプロバイダからインスタンスを取得します。あなたは怠惰ではないはロードされ、それは、任意の限り（ルートインジェクタへのプロバイダとして追加され、したがって、アプリケーション全体で共有されていることどんな@NgModule(...)のproviders: [...]にサービスを追加した場合> = RC.5で

子孫コンポーネントは子孫のためにそれをオーバーライドするプロバイダとしても持っています）。

遅延読み込みモジュールの場合、遅延読み込みモジュールには独自のDI子スコープがあるため、プロバイダはこの遅延読み込みモジュール内で共有されます。