Différentes méthodes pour partager des données entre composants dans Angular – Partie 2 / Blogs / Perficient

Bon retour à différentes méthodes pour partager des données entre composants dans Angular. Dans cet article, nous continuerons avec les autres méthodes de partage de données dans les composants angulaires.

3. Partage de données à l’aide des paramètres de routage ou des paramètres de requête.

Le module de routage d’Angular permet de transmettre des données entre les composants en utilisant les paramètres de routage.
Exemple:

Nous pouvons transmettre des données via l’URL et les récupérer dans le composant cible à l’aide du module ActivatedRoute.

4. Partage de données à l’aide de State Management avec Reactive Extensions (RxJS).

Lorsqu’il s’agit de besoins complexes de partage de données sans connexion directe, comme les frères et sœurs, les petits-enfants, etc., l’utilisation d’une solution de gestion d’état telle que RxJS peut être très bénéfique.

RxJS fournit des observables et des sujets qui facilitent la programmation réactive et permettent un partage efficace des données entre les composants. Ici, encore une fois, nous utilisons des services mais avec une approche RxJS. Vous pouvez également utiliser un sujet RxJS classique pour partager des données via le service, mais voici pourquoi je préfère BehaviorSubject.

• Il renverra toujours la valeur actuelle lors de l’abonnement – ​​il n’est pas nécessaire d’appeler « onNext ».
• Il dispose d’une fonction « getValue() » pour extraire la dernière valeur sous forme de données brutes.
• Cela garantit que le composant reçoit toujours les données les plus récentes.

Fichier de service partagé :

Dans le service, nous créons un BehaviorSubject privé qui contiendra la valeur actuelle du message. Nous définissons une variable currentMessage pour gérer ce flux de données comme observable qui sera utilisé par les composants. Enfin, nous créons une fonction qui appelle next sur le BehaviorSubject pour modifier sa valeur.

Composant parent

Les composants parent, enfant et frère ou sœur reçoivent tous le même traitement. Nous injectons le DataService dans le constructeur, puis nous abonnons à l’observable currentMessage et définissons sa valeur égale à la variable de message.

Composant enfant / Composant frère :

Maintenant, si nous créons une fonction dans l’un de ces composants qui modifie la valeur du message. Lorsque cette fonction est exécutée, les nouvelles données sont automatiquement diffusées vers tous les autres composants.

5. Partage de données à l’aide de LocalStorage ou SessionStorage

Si vous avez besoin de conserver des données entre des sessions ou entre différentes parties de votre application, vous pouvez stocker les données dans le « localStorage » ou « sessionStorage » du navigateur. Notez cependant que ces méthodes sont limitées aux données basées sur des chaînes.

Le stockage local est le stockage côté client pour les applications Web. Il y reste tant qu’il n’est pas effacé, contrairement au stockage de session, qui dure toute la session actuelle de l’onglet du navigateur. Le stockage local fournit jusqu’à 5 Mo de stockage, alloué séparément pour chaque domaine. Par exemple, le stockage local du site Web www.facebook.com sera différent de celui de www.twitter.com.

Créons un fichier de service nommé « LocalService » pour stocker les données dans le stockage local.

Pour utiliser le LocalService dans le fichier de composant, vous devez l’injecter en l’important dans votre fichier de composant requis en créant une instance dans la méthode constructeur.
Composant d’application :

Une fois le composant de l’application chargé, il définira la valeur de « id » dans le stockage local via la méthode « saveData() » du fichier « LocalService », et nous pouvons obtenir la même valeur de clé en cliquant sur la méthode « getIdFromLocal() » en appelant « getData () » à partir du fichier « LocalService ».

L’API de stockage local fournit plusieurs méthodes pour stocker, récupérer, supprimer et effacer le stockage.

Par exemple:

1. localStorage.setItem(‘jeton’,’xhja787′)
2. localStorage.getItem(‘jeton’)
3. localStorage.removeItem(‘jeton’)
4. localStorage.clear()

Remarque : localStorage stocke uniquement les valeurs de chaîne. Pour stocker des objets ou des tableaux, vous devez d’abord utiliser JSON.stringify pour les convertir en chaîne.

Ainsi, nous pouvons utiliser le stockage local ou le stockage de session dans Angular pour partager des données entre composants.

Conclusion

Dans cet article, nous avons exploré différentes méthodes de partage de données entre composants dans Angular. De la simple communication parent-enfant utilisant les propriétés d’entrée et de sortie aux solutions avancées telles que la gestion d’état avec RxJS, vous disposez désormais d’une gamme d’options parmi lesquelles choisir en fonction de la complexité de votre application.

N’oubliez pas de sélectionner la méthode qui correspond le mieux à votre cas d’utilisation et de maintenir des pratiques de partage de données cohérentes dans l’ensemble de votre application. En adoptant des techniques de partage de données appropriées, vous pouvez garantir une communication efficace des composants et créer des applications angulaires robustes.