Les événements de composants avec EventEmitter et @Output dans Angular

Les composants Angulaires sont les blocs de construction fondamentaux de l’architecture. Une fois que vous avez compris l’architecture des composants, vous pouvez créer une image dans votre tête sur la façon d’assembler votre interface en fonction de la communication de données.

Dans cet article, nous allons nous plonger dans les composants Angulaires et comment utiliser l’EventEmitter et les sorties, afin que nous puissions transférer ou notifier à tout composant parent que quelque chose a changé, ou nous aimerions le changer. Cela se fait généralement via des “événements”, d’où notre “EventEmitter” et est conçu autour d’un système de flux de données unidirectionnel qui adopte une approche beaucoup plus raisonnable du développement d’applications.

Finalisons les bases de la communication parent-enfant et enfant-parent en introduisant EventEmitter et @Output.

Série

1. Amorçage de votre première application Angular
2. Création de votre premier composant Angular
3. Passage de données dans des composants Angular avec @Input
4. Événements de composants avec EventEmitter et @Output dans Angular

Introduction

Ce tutoriel couvrira les événements de composants sans état à l’aide de l’API EventEmitter et du décorateur @Output. Ceux-ci nous permettent d’émettre des changements ou des noms d’événements personnalisés à partir d’un composant personnalisé dans Angular.

Cet article fait suite à l’article précédent sur le passage de données dans des composants angulaires avec @Input, alors assurez-vous de le lire en premier!

Liaison de composant avec état (parent)

Tout comme dans le didacticiel précédent, où nous configurons un décorateur @Input pour accepter une liaison d’entrée, nous pouvons faire de même et écouter dans le parent lorsqu’une valeur change dans notre composant enfant.

Pour ce faire, nous retournerons à notre composant parent qui rend notre compte:

J’ai fait quelques ajouts ici:

• Changé initialCount en myCount, nous ne définissons plus un “initialCount”, donc l’état de comptage sera géré dans le parent une fois que le composant enfant y aura apporté une modification
• Créé une propriété change personnalisée pour le modèle <counter>, en utilisant la syntaxe de liaison d’événements (), comme nous l’avons appris lors de la création de notre premier composant cela signifie une sorte d’événement (tel qu’un click lorsqu’il est utilisé sur un nœud d’élément natif).
• A enregistré la propriété myCount dans le parent
• A ajouté une méthode countChange() {} à la classe et l’a transmise à l’écouteur d’événements (change)

🎉 Téléchargez-le gratuitement!

Allez au-delà du tableau ForEach. Soyez confiant avec des méthodes plus avancées telles que Reduce, Find, Filter, Every, Some et Map et comprenez parfaitement comment gérer les structures de données JavaScript.

• Comprendre parfaitement comment gérer les Structures de données JavaScript avec des opérations immuables
• 31 pages de syntaxe approfondie, exemples concrets, trucs et astuces
• Écrivez une logique de programmation plus propre et mieux structurée en 3 heures

✅ Succès ! Vérifiez votre email, profitez-en.

En prime, nous vous enverrons également des goodies supplémentaires à travers quelques e-mails supplémentaires.

Cela met en place notre flux de données unidirectionnel finalisé. Les données descendent de la classe AppComponent, dans le `, le compteur peut alors modifier les valeurs – et une fois que la valeur a changé, nous nous attendons à ce que countChange() soit appelé. Nous devons maintenant le câbler.

@Décorateur de sortie

Tout comme en utilisant Input, nous pouvons importer Output et décorer une nouvelle propriété change à l’intérieur de notre CounterComponent:

Cela configurera les métadonnées nécessaires pour indiquer à Angular que cette propriété doit être traitée comme une liaison de sortie. Cependant, il doit s’asseoir à côté de quelque chose appelé le EventEmitter.

EventEmitter

C’est la partie intéressante. Pour pouvoir utiliser notre Output, nous devons importer et y lier une nouvelle instance du EventEmitter:

En utilisant TypeScript au maximum, nous ferions quelque chose comme ça pour signifier le type de valeur d’événement que nous émettons, et notre sortie change est de type EventEmitter. Dans notre cas, nous émettons un type number:

Invoquant l’EventEmitter

Alors que se passe-t-il ici? Nous avons créé une propriété change et y avons lié une nouvelle instance de EventEmitter – et ensuite ?

Nous pouvons simplement appeler notre méthode this.change – cependant, comme elle fait référence à une instance de EventEmitter, nous devons appeler .emit() pour émettre un événement au parent:

Cela émettra alors une modification de notre écouteur (change) que nous avons configuré dans le parent, auquel notre rappel countChange($event) sera appelé, et les données associées à l’événement nous seront données via la propriété $event .

Affectation de rappel avec état

Voici ce que nous devrons faire, réaffecter this.myCount avec le event qui est renvoyé. Je vais expliquer pourquoi ci-dessous:

Cela crée un flux de données unidirectionnel pur. Les données proviennent de AppComponent, s’écoulent dans notre compteur, le compteur effectue un changement et émet ce changement vers le parent sur notre commande – via le EventEmitter que nous avons configuré. Une fois que nous avons sauvegardé ces données, nous fusionnons ces modifications dans notre composant parent (avec état).

La raison pour laquelle nous faisons cela est de démontrer que Parent: {{ myCount }} met à jour en même temps que notre Output informe le parent.

Bonus: noms de propriétés personnalisés

Tout comme nous l’avons appris avec @Input() et en créant des noms de propriétés personnalisés, nous pouvons également faire de même avec @Output().

Supposons que nous changeons la liaison (change) en (update):

Nous pouvons connecter notre nom de propriété personnalisé, tout en préservant le nom de propriété interne @Output:

Essentiellement, nous disons simplement à Angular ici de rechercher update comme propriété à lier, et nous pouvons continuer à utiliser this.change en interne.

Donc, vous l’avez, le guide d’utilisation des sorties avec EventEmitter dans les composants Angular. Maintenant, vous comprenez le modèle, bon codage!

Pour en savoir plus sur les techniques, les meilleures pratiques et les connaissances d’experts du monde réel, je vous recommande vivement de consulter mes cours Angular – ils vous guideront tout au long de votre parcours vers la maîtrise d’Angular au maximum!