2017-08-16 7 views
6

角度v4:データをサービス、コンポーネント、またはその両方に格納しますか?角度v4:データをサービス、コンポーネント、またはその両方に格納しますか?

多くのチュートリアルやAngularのドキュメントを読んだあと、私はまだこのテーマについてはっきりしていません。

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

https://angular.io/guide/architecture#services Angular's Architecture> Servicesセクションには、データ配列を持つサービスのコードが表示されます(これは適切ですか?)。私たちはルーティングを使用する場合、我々はコンポーネントにデータを格納した場合、我々は頻繁に(私たちは、フロントエンドでこのデータを欲しいと仮定)子コンポーネント間でデータを移動するために@Inputと@outputを使用します

が、しかしこれは、問題を提起します私たちは新しいコンポーネントを必要としていました。この新しいコンポーネントは、ルータのコンセントからロードされ、私たちのサービスを新たに呼び出して、私たちのサーバーにAPIを呼び出してデータを保持することを約束します。おそらくこの場合、同じデータを保持する2つのコンポーネントがありますが、一致しない可能性があります。

データをサービスに保存すると、私たちのサービスは1つのデータセットを保持するようにサービスを大量に使用してデータを検索し、データを操作します(このデータをフロントエンドで使用すると仮定します)。構成要素は、一貫したデータを得るためにいつでもサービスデータを呼び出すことができる。

-

データを保存する適切な方法は何ですか? もう1つはアドバイスされていませんか?

答えて

3

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

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

+1

"さまざまなコンポーネント間で特定のデータを送信する必要がない場合は、コンポーネントにデータを格納することは完全に受け入れられます。公式のスタイルガイドによるものではありません。 – Baruch

+0

まだデータをサービスに保存していますか?私はUdemyコースを通してその方法を教えられました –

+1

角度アーキテクチャの公式ガイドでは、 'コンポーネントのアプリケーションロジックを定義します。これはクラス内のビューをサポートするために何をしますか?クラスはプロパティとメソッドのAPIを介してビューとやりとりします。つまり、コントローラはコンポーネント内のUIを操作するために、サービスや入力を通じてデータを知るだけです。 – Baruch

1

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

3

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

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

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

サービスの永続性は、観測可能なものを使用して、フロントエンドとバックエンドの間のその直通線を常に維持することも可能にします。

うまくいけば、これが役に立ちます。

EDIT

はAngular.ioチュートリアルでは、ユーザーはチュートリアルを次のようにフレームワークに完全な導入を与えるのを助けるために、複数のセクションに分割されていることに注意してください。

3

複数のコンポーネントがデータを共有する場合は、可能な場合はサービスに入れます。可能な場合は、サービスでデータを管理することで、失効したデータについて心配する必要があるため、私は言います。私のgotoデータ格納場所はComponentにありますが、サイトで常にデータを再フェッチする必要がないように、この作業は慎重に行う必要があります。

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

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

私はこれについては専門家ではありませんが、これは私の意見です。

+0

コンポーネントでデータを管理する場合、サービスは何を使用しますか? – Baruch

+0

サービスは、データのGET/POST/PUTアクション専用で、コンポーネントがサービスを呼び出してデータを取得し、コンポーネントに格納します。私は、コンポーネントがそのデータをどのように複製しないので、ビューはそれを使用できるので、すべてがサービスに格納されている場所にすることをためらっていますか?また、私は自分の投稿にコメントすることができます!神様、コメントできないのは本当の苦痛です。これを書いた後、実際には私のデータを「保持」するためにサービスを使用していると思います。私はデータをサービスにキャッシュしません。コンポーネントはサービスを使用して必要なデータを取得します。 –

+0

私はまた、実際にはサービス内のデータをキャッシュすることを望んでいます...私はちょうど実際にこれを行うには時間を見つけなければなりません。 –

関連する問題