web-dev-qa-db-ja.com

Angular v4:サービスまたはコンポーネント、あるいはその両方にデータを保存しますか?

Angular v4:サービスまたはコンポーネント、あるいはその両方にデータを保存しますか?

かなりの数のチュートリアルをレビューし、Angularのドキュメントを読んだ後、この主題についてはまだ明確ではありません。

https://angular.io/tutorial/toh-pt2 Angularのチュートリアルでは、コンポーネントに保存されているデータを明確に示しています。

https://angular.io/guide/architecture#services Angularの[アーキテクチャ]> [サービス]セクションには、データの配列を持つサービスのコードが表示されます(これは適切ですか?)。

Componentsにデータを格納する場合、@ Inputと@Outputを使用して子コンポーネント間でデータを移動します(このデータがフロントエンドにあると仮定します) )、しかしこれはルーティングを使用するときに問題を引き起こしますが、データを保持するためにサーバーへのAPI呼び出しを行うことを約束するために、ルーターアウトレットからロードした新しいコンポーネントがサービスへの新しい呼び出しを行う必要があります。おそらくこの場合、同じデータを保持する2つのコンポーネントがありますが、一致しない場合があります。

サービスにデータを保存する場合、サービスを頻繁に使用してデータを取得し、データを操作します(このデータがフロントエンドにあると仮定します)この方法では、サービスは1セットのデータを保持し、各コンポーネントはいつでもサービスデータを呼び出して一貫したデータを取得できます。

-

データを保存する適切な方法は何ですか?他の1つは推奨されませんか?

22
Speros

一般的に、多くのコンポーネントが同じデータを使用する場合、サービスにデータを保存します。そうすれば、アプリのすべての異なる部分から同じデータに非常に簡単にアクセスできます。 1つのコンポーネントがサービス内のデータを変更すると、そのデータを使用するすべてのコンポーネントに対して変更されますが、これは通常非常に役立ちます。ただし、1つのコンポーネントから別のコンポーネントにデータを送信するだけで、一方が他方の親である場合にのみ必要な場合があります。このシナリオでは、入出力を使用することをお勧めします。

さまざまなコンポーネント間で特定のデータを送信する必要がない場合、データをコンポーネントに保存することは完全に受け入れられます!入出力を使用しない限り、他のコンポーネントからアクセスできないことに注意してください。

11
Alex Nelson

コンポーネントコントローラーは、その特定のコンポーネントのUI対話のみを管理する必要があります。

一方、サービスは、コンポーネント間の相互作用、データマッピング、直接関係のないコンポーネント間のイベント処理(親>子、兄弟など)を管理します。

この背後にある考え方は、一度作成されたサービスはスコープ内にとどまり、破棄されないということです。一方、コンポーネントは破棄された後にDOMから削除されます。これにより、たとえば、コンポーネントを使用してデータを収集するAPI呼び出しを行う場合、このAPI呼び出しは、コンポーネントがフレームワークのライフサイクルで初期化されるたびに実行されますが、既に述べたようにサービスは持続します。

また、サービスの永続性により、オブザーバブルのようなものを使用して、フロントエンドとバックエンドの間の直接的なラインを常に維持することができます。

これがお役に立てば幸いです。

[〜#〜] edit [〜#〜]

Angular.ioチュートリアルは複数のセクションに分かれており、ユーザーがチュートリアルを進めるときにフレームワークを完全に紹介できるようになっています。

9
Baruch

複数のコンポーネントがデータを共有している場合は、可能であればそれをサービスに入れてください。サービスにデータを管理させることにより、古いデータを心配する必要があるため、可能な場合は言います。 gotoのデータストレージの場所はコンポーネントにありますが、サイトで常にデータを再フェッチする必要がないように、これを行うには注意が必要です。

個人的には、古いデータの問題を回避するために、ほとんどのコンポーネントが独自のデータを管理しています。

これを心配していない場合は、データをRAMに保存する代わりに、ローカルストレージまたはセッションストレージに保存するキャッシングサービスを使用して、サイトの負荷によってサイトが遅くならないようにすることもできますコンピューターのラムに置かれているデータ。

私はこれに関する専門家ではありませんが、これは単なる意見です。

4
Adam Pine

@OutputはEventEmitterの権限に関連しているため、イベントにバインドすることでコンポーネント間でデータが共有されます。サービスは、通常、HTTPリクエストのようなこと、つまりRESTFUL APIのようなことを行う場所です。ローカルストレージ、ネットワーク接続、またはアプリの実行中に状態を保存するためのバケットとしても使用できます。コンポーネントは一般にビューに関連付けられ、シャドウDOMを使用します

1
JGFMK