Angular 4 - Mise à jour dynamique du contenu à travers les composants

Question

Peut-être que je suis à la recherche de mauvais termes, mais je ne fonctionne pas.

J'ai une barre latérale (composant1) où l'utilisateur est affiché avec son nom et dans ma section de contenu (composant2) il y a un formulaire où l'utilisateur peut mettre à jour son nom. Maintenant, si l'utilisateur change son nom et que la base de données dit d'accord, le nom devrait également changer dans la barre latérale.

Dans Ionic il y a un abonnement d'événement où une fonction attend qu'un événement soit déclenché (là je pourrais aller chercher l'utilisateur encore). Y a-t-il quelque chose de similaire dans Angular 4?

Edit1:

Voici où se trouvent les composants. Le meilleur moyen serait que mon auth.service stocke et mette à jour l'utilisateur. Si un autre composant effectue des modifications, il appelle une fonction getUser dans auth.service et met à jour l'objet utilisateur pour tous les autres composants qui les ont connectés auparavant.

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

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

Answer 1

J'utiliser RxJS écouter observables des changements appliqués sur la forme: la component 1 et component 2 pourrait utiliser un subject pour communiquer entre eux. Lorsque l'utilisateur soumet le formulaire, un service externe ou le component 2 lui-même, envoie les données au backend et attend la réponse.

Si la réponse est réussie, alors il utilise la méthode next() de RxJS sous réserve de permettre aux autres composants de connaître les nouveaux détails de l'utilisateur. Comme component 1 est abonné à ce même sujet, il recevra les données mises à jour.

Cette approche permet, non seulement component 2, mais tout autre composant abonné au sujet connaît les mises à jour.