Différentes méthodes pour partager des données entre composants dans Angular

Introduction

Le partage de données entre composants dans Angular est une exigence courante dans les applications complexes comportant plusieurs composants. Angular propose plusieurs méthodes pour accomplir cette tâche de manière efficace et efficiente. Dans ce blog, nous examinerons différentes méthodes pour partager des données entre composants. Nous couvrirons des méthodes allant de la plus simple à la plus avancée, vous permettant de choisir celle qui convient à votre cas d’utilisation.

Ici, je suppose que vous avez déjà effectué la configuration du projet et que vous connaissez les bases d’Angular, comme le fonctionnement des liaisons de données bidirectionnelles, l’importation et l’exportation de fichiers. Les méthodes de partage de données entre les composants sont les suivantes :

1. Communication parent-enfant utilisant les propriétés d’entrée et de sortie.

À l’aide des propriétés d’entrée, vous pouvez envoyer des données du composant parent au composant enfant et utiliser les propriétés de sortie pour obtenir des données du composant enfant vers le composant parent.

un. Parent à enfant utilisant le décorateur @Input().

Les propriétés d’entrée vous permettent de transmettre des données d’un composant parent à son composant enfant. En définissant une propriété dans le composant enfant avec @Input() décorateur, vous pouvez recevoir les données du composant parent.
Exemple:

Ici, nous obtiendrons « Bonjour message du parent ! » message du composant parent vers le composant enfant à l’intérieur de la variable de données.

b. Enfant à parent utilisant @Output() et EventEmitter

Une autre façon de partager des données consiste à émettre des données provenant de l’enfant, qui peuvent être écoutées par le parent. Cette approche est idéale lorsque vous souhaitez partager les modifications de données qui se produisent sur des éléments tels que les clics sur des boutons, les entrées de formulaire et d’autres événements utilisateur.
Exemple:

Dans le parent, nous créons une fonction pour recevoir le message et la définissons égale à la variable de message.

Chez l’enfant, on déclare messageÉvénement variable avec le décorateur Output et définissez-la égale à un nouvel émetteur d’événements. Ensuite, nous créons une fonction nommée envoyer le message que les appels émettent sur cet événement avec le message que nous voulons envoyer. Enfin, nous créons un bouton pour déclencher cette fonction.
Le parent peut désormais s’y abonner messageÉvénement qui est généré par le composant enfant, puis exécutez le recevoir un message fonctionner chaque fois que cet événement se produit.

c. Enfant à parent utilisant ViewChild

ViewChild est une autre méthode pour partager des données d’un enfant à un parent. ViewChild permet d’injecter un composant dans un autre, donnant au parent l’accès à ses attributs et fonctions.

Un problème avec ViewChild est que l’enfant ne sera disponible qu’après l’initialisation de la vue. Cela signifie que nous devons implémenter le hook de cycle de vie AfterViewInit pour recevoir les données de l’enfant.

Exemple:

2. Partager des données avec un service

Une autre méthode puissante pour partager des données entre composants consiste à utiliser un service partagé. Un service partagé agit comme un point central pour la manipulation des données et la communication entre les composants. Les composants peuvent partager des données en injectant et en accédant au service.

Exemple:
Dossier des services.

Ici, nous définissons la propriété du « Composant A » en appelant le fichier de service partagé setSharedData() et récupérez les données du même fichier de service partagé dans le « Composant B » en appelant getSharedData() méthode.

Ainsi, en utilisant cette méthode, vous pouvez partager des données entre des composants frères et sœurs dans Angular.

Suivant

Dans le prochain articlenous continuerons avec d’autres façons de partager des données entre les composants dans Angular.