サービス提供とコンポーネントへの入力の受け渡し

Question

コンポーネントは、特定のサービスが利用可能であることを要求し、入力を受け入れることもできます。いつサービスが必要なのか、いつ入力が必要なのでしょうか？

Answer 1

サービスは、多くの場合、コンポーネントのツリーで同じものを提供するのに適しています。たとえば、通常、Httpサービスはアプリケーションのすべてのコンポーネントで同じです。サービスのようなものがないと想像してください。あなたは同じコードをたくさん複製しなければならないし、どこでも何かの実装を渡す必要があります。アプリケーションのすべてのコンポーネントは、入力としてHttpServiceをその子に渡す必要があります。

入力は、他のものに1つのものを提供するのに適していることがよくあります。たとえば、％completeを進行状況バーに渡すと、親と子の間に緊密なやりとりができます。入力のようなものがないと想像してください。テキストボックスの値を設定するだけで、どこにでも情報を渡すたびにサービスを作成する必要があります。

考慮事項：

は、コンポーネントの親またはユーザーが渡されていたデータや機能に注意する必要があります、またはそれはあなたのプログラムやコンポーネントツリーの一部の単なる側面ですか？たとえば、OrderComponentは、OrderServiceに依存する場合があります。 OrderComponentの親コンポーネントは、OrderServiceを必ずしも知っている必要はありません（どのOrderServiceを使用するか、OrderServiceが使用するHttpServiceの実装など）が分からないため、サービスを維持することが理にかなっています。プログレスバーの場合、直接的な親は完全なパーセンテージを知っています。それが分からなければ、そこにプログレスバーを置くのはなぜですか？

データまたは機能がコンポーネントの目的に直接関係して渡されていますか？たとえば、HttpServiceの特定の実装は、OrderComponentの第2の関心事であり、その主な仕事は注文を表示することです（それはそうします）が、完了率は進行状況バーの主な関心事です。

データは実行時に変更されますか？変更入力は変更検出をトリガしますが、サービス内で変化するプリミティブ値は変化しません。サービスには通常、変更のない機能があります。サービス内のデータをコンポーネント内で使用する必要がある場合は、BehaviorSubjectまたはその他のObservableをサービスに入れ、asyncパイプを使用してその値をコンポーネントテンプレートに表示することができます。

コンポーネントにサービスを期待させることができますが、同じ親コンポーネント内のそのコンポーネントの2つのインスタンスが同じ提供されたサービスインスタンスを共有する必要があることを心配してください。親コンポーネントは、そのサービスを提供する別のコンポーネントを中間に作成することによって、すべての子コンポーネントに同じサービスを提供することを避けることができます。

ここにコンポーネントの相互作用についての詳細

： https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

良い質問です。私は、サービスに結合されているコンポーネントを必要としているのか、より構成可能であり、独自の立場にあるコンポーネントが必要なのか、という答えが出てくると思います。

両方のユースケースがあります。たとえば、コンポーネントはサービスに依存してデータを取得する場合があります。いいところは、呼び出し元のコンポーネントから構成することが少ないということです（データを渡す必要はありません。すぐに使えます）。一方、データを渡す場合は、コンポーネントのプラグイン可能性が低くなります。

サービスに依存しないコンポーネント（つまり、データを取得するために）さまざまな他のコンテキストでより使用可能かもしれません。たとえば、サービスを利用してデータを取得する代わりに、データを親コンポーネントからその@Inputプロパティに渡すことができます。