Un guide sur la façon d'utiliser Subject RxJS et BehaviourSubject RxJS pour communiquer entre les composants angulaires.Dans cet article, j'utiliserai RxJS pour montrer comment les composants interagissent lorsqu'ils ne se connaissent pas ou n'ont pas de relation parent / enfant commune.
Contenu:
- Le problème
- Méthode 1: transport d'événements
- Méthode 2: Observateur de service
- Candidature
Le problème
Dans de nombreux cadres, y compris Angular, le problème de l'interaction des composants se pose toujours lorsque nous divisons l'application en plusieurs petits composants d'interface utilisateur et que nous nous lions à l'élément parent de l'élément parent pour écouter les événements.
Dans Angular, nous utilisons Output () et Input (). Dans les cas standard, cela suffit, mais lorsque vous devez associer des données entrantes et des événements sortants au composant parent, la gestion de tout cela devient un cauchemar.
Vous devez ajouter un tas d'entrées () et de sorties () à de nombreux niveaux du composant - cela nécessite beaucoup d'efforts, est risqué et ne fonctionne pas toujours.
Une solution consiste à utiliser un gestionnaire d'état tel que Redux, NGRX ou NGXS pour aider les composants non liés à communiquer.
Dans cet article, je vais vous présenter deux façons supplémentaires de résoudre ce problème qui ne nécessitent pas l'utilisation de bibliothèques supplémentaires.
- Transport d'événements à l'aide de Subject.
- Observateur de service utilisant un sujet de comportement.
Pour illustrer ces solutions, je vais créer
un exemple dans lequel un utilisateur peut cliquer sur un élément de la liste d'articles et afficher les détails dans un autre composant.
Méthode 1: transport d'événements
Le concept est très simple. Vous créez un service dont les événements seront disponibles partout.
Le service distribue des événements et les abonnés peuvent exécuter une fonction de rappel lorsqu'un événement se produit. Dans cet article, je vais créer un transport d'événements à l'aide d'un sujet RsJS.
Chaque fois qu'un utilisateur clique sur un élément de la liste d'articles, il génère un événement et le transmet à l'aide du transport d'événements.
Ce code signifie que nous avons distribué l'événement SelectArticleDetail avec les informations sur l'article.
L'auditeur écoutera SelectArticleDetail et effectuera un rappel, transférera les données d'article vers une variable locale et les affichera dans l'interface utilisateur.
Méthode 2: Observateur de service
L'idée est de créer simplement un moyen de transférer des données de l'intérieur. C'est-à-dire que chaque fois qu'une valeur change, l'observateur s'en rend compte et remplit la fonction de rappel.
Chaque fois qu'un utilisateur clique sur un élément de la liste, il ajoute un article au référentiel.
Maintenant, dans le composant de pièce, nous allons nous abonner à la mise à jour du référentiel pour obtenir une nouvelle valeur.
Candidature
J'ai appliqué ces approches dans de nombreux projets. Voici quelques exemples où cela est très approprié:
- Transport d'événements: je souhaite utiliser la même fenêtre modale pour afficher à l'utilisateur des informations sur l'état de l'application à chaque fois qu'il clique sur le bouton
- Transport d'événements: si vous utilisez un mono-référentiel avec plusieurs frameworks, il est pratique d'utiliser cette approche pour échanger des événements entre frameworks ou pour distribuer un événement de Angular vers JavaScript natif
- Transport d'événements et observateur de service pour les composants imbriqués: il est difficile d'utiliser Input () et Output () pour connecter les données entrantes / sortantes et les événements d'interface utilisateur du composant D avec le composant d'interface utilisateur B, avec le composant d'interface utilisateur C et le composant parent A lors de l'interaction avec l'API
Si vous avez plus d'exemples, je serai heureux de les connaître. Apprendre des autres est un excellent moyen de s'améliorer.
Pour résumer
Cet article concerne deux façons d'interagir entre deux ou plusieurs composants non liés.
Nous utilisons l'Observateur de services pour vous abonner aux données pour des cas simples et nous utilisons le transport d'événements pour envoyer différents événements à différents auditeurs.
J'espère que l'article vous a été utile! Suivez-moi sur
Medium et
Twitter . N'hésitez pas à commenter et à poser des questions. Je serai ravi de vous aider!