2017-10-14 10 views
0

多分私は誤った用語を検索していますが、それはうまくいきません。角4 - コンポーネント間でコンテンツを動的に更新する

ユーザーには名前が表示されるサイドバー(component1)があり、コンテンツセクション(component2)にはユーザーが自分の名前を更新できるフォームがあります。今ユーザが自分の名前を変更していて、データベースが大丈夫だと言うならば、その名前はサイドバーでも変わるはずです。

イオニックには、イベントが発生するのを待つイベントサブスクリプションがあります(ユーザーを再びフェッチすることができます)。 Angular 4に似たものがありますか?

EDIT1:

ここ

部品が配置されている場所です。最善の方法は、私のauth.serviceがユーザーをストアして更新する場合です。他のコンポーネントが変更を行っている場合は、auth.serviceでgetUser関数を呼び出し、以前にフックした他のすべてのコンポーネントについてユーザーobjetを更新します。

https://i.stack.imgur.com/xKllS.png

https://i.stack.imgur.com/IoFyV.png

+0

https://angular.io/guide/component-interaction – omeralper

+0

@omeralperはい私はその方法を知っていますが、そのコンポーネントは両方とも 'panel'というコンポーネントの子コンポーネントです。構造の編集を見てください – muuvmuuv

答えて

1

私は、フォームに適用されたすべての変更内容を聞くことがRxJSの観測を使用します。component 1component 2は、それらの間の通信にsubjectを使用することができます。ユーザーがフォーム、外部サービス、またはcomponent 2を送信すると、データがバックエンドに送信され、応答が待機されます。

応答が成功した場合は、RxJSのnext()メソッドを使用して、他のコンポーネントに新しいユーザーの詳細を知らせることができます。 component 1は同じサブジェクトに登録されているため、更新されたデータを受信します。

このアプローチでは、component 2だけでなく、サブジェクトにサブスクライブしている他のコンポーネントが更新情報を知ることができます。

関連する問題