Event binding ( (event) )

Les directives de liaison que vous avez rencontrées jusqu'ici transfèrent les données dans un sens: d'un composant à un élément.

Les utilisateurs ne se contentent pas de regarder l'écran. Ils entrent du texte dans les zones de saisie. Ils choisissent des éléments dans les listes. Ils cliquent sur des boutons. De telles actions de l'utilisateur peuvent entraîner un flux de données dans le sens opposé: d'un élément à un composant.

Le seul moyen de connaître l'action d'un utilisateur est d'écouter certains événements tels que les frappes au clavier, les mouvements de la souris, les clics et les contacts. Vous déclarez votre intérêt pour les actions de l'utilisateur via la liaison d'événement angular.

La syntaxe de liaison d'événement comprend un nom d'événement cible entre parenthèses à gauche d'un signe égal et une instruction de modèle entre guillemets à droite. La liaison d'événement suivante écoute les événements de clic du bouton, appelant la méthode onSave() du composant à chaque clic :

Événement cible

Un nom entre parenthèses par exemple, (click) identifie l'événement cible. Dans l'exemple suivant, la cible est l'événement de clic du bouton.
Certaines personnes préfèrent le on-préfixe (on-click) alternatif, appelé forme canonique :
Les événements d'élément peuvent être les cibles les plus courantes, mais Angular cherche d'abord à savoir si le nom correspond à la propriété d'un événement d'une directive connue, comme dans l'exemple suivant:

$event et déclarations de gestion d'événement

Dans une liaison d'événement, Angular configure un gestionnaire d'événement pour l'événement cible.

Lorsque l'événement est déclenché, le gestionnaire exécute l'instruction de modèle. L'instruction de modèle implique généralement un destinataire, qui effectue une action en réponse à l'événement, tel que le stockage d'une valeur du contrôle HTML dans un modèle.

La liaison transmet des informations sur l'événement, y compris les valeurs de données, via un objet d'événement nommé $event.

La forme de l'objet événement est déterminée par l'événement cible. Si l'événement cible est un événement d'élément DOM natif, l'objet $event est un événement DOM , avec des propriétés telles que target et target.value.

Considérons cet exemple :

Ce code définit la propriété value de la zone de saisie en se liant à la propriété name. Pour écouter les modifications de la valeur, le code est lié à l'événement input de la zone de saisie. Lorsque l'utilisateur apporte des modifications, l'événement input est déclenché et la liaison exécute l'instruction dans un contexte incluant l'objet événement DOM $event.

Pour mettre à jour la propriété name, le texte modifié est récupéré en suivant le chemin $event.target.value.

Événements personnalisés avec EventEmitter

Les directives génèrent généralement des événements personnalisés avec un EventEmitter angular. La directive crée un EventEmitter et l'expose comme une propriété. La directive appelle EventEmitter.emit(payload) pour déclencher un événement, en transmettant une charge utile de message, qui peut être n'importe quoi. Les directives parent écoutent l'événement en se liant à cette propriété et en accédant à la charge utile via l'objet $event.

Pensez à un Component HeroDetail qui présente les informations du héros et répond aux actions de l'utilisateur. Bien que le Component HeroDetail possède un bouton de suppression, il ne sait pas comment supprimer le héros lui-même. Le mieux qu'il puisse faire est de déclencher un événement rapportant la demande de suppression de l'utilisateur. Voici les extraits pertinents de cela :

src / app / hero-detail.component.ts (modèle)

src / app / hero-detail.component.ts (deleteRequest)

Le composant définit une propriété deleteRequest qui retourne un EventEmitter. Lorsque l'utilisateur clique sur "Delete", le composant appelle la méthode delete() et lui demande EventEmitter d'émettre un objet Hero.

Maintenant , imaginez un composant parent d'hébergement qui se lie au Component HeroDetail et a l'événement deleteRequest.

Lorsque l'événement deleteRequest se déclenche, Angular appelle la méthode deleteHero du composant parent, en transmettant le héros à supprimer (émis par HeroDetail) dans la variable $event.

Les déclarations de modèle ont des effets secondaires

La méthode deleteHero a un effet secondaire, elle supprime un héros. Les effets secondaires des déclarations de modèle ne sont pas simplement acceptables, mais sont attendus.

La suppression du héros met à jour le modèle, provoquant peut-être d'autres modifications, notamment des requêtes et des sauvegardes sur un serveur distant. Ces modifications pénètrent dans le système et sont finalement affichées dans cette vue et d'autres.