Angular - 2.17-Transmettre et utiliser des données avec la liaison d'événements

Dans le dernier cours, nous avons examiné la liaison d'événement. Maintenant, avant de se concentrer sur la liaison bidirectionnelle et d'expliquer ce que c'est, il y a une autre chose importante que vous devez savoir sur la liaison d'événements.

Disons qu'avant ce bouton, nous avons également une étiquette serverName. Et plus important encore, nous avons une entrée à laquelle nous pouvons donner une classe bootstrap form-control. Ici, je veux permettre à l'utilisateur d'entrer le nom du serveur qui devrait être créé. Donc, ici nous pouvons écouter l'événement input. C'est un événement DOM normal fourni par l'élément d'entrée qui est bien plus que ce que l'utilisateur tape. Et ici, nous pouvons exécuter la mise à jour du serverName parce qu'il sera déclenché à chaque touche entrée.

Ajoutons donc cette méthode à notre composant. Et maintenant, je veux en quelque sorte sortir ce que l'utilisateur a entré en ce moment, quelle est la valeur de ce champ. Maintenant, nous pouvons le faire en passant l'événement du signe dollar ici. Et le signe dollar event, super important ! C'est une sorte de nom de variable réservé que vous pouvez utiliser dans le modèle lorsque vous utilisez la liaison d'événement pour cet événement.

Donc, seulement entre ces guillemets ici, l'événement du signe dollar sera simplement les données émises avec cet événement. Donc input et click sont des évènements par défaut fournis par le DOM. Et ils nous envoient des données lorsqu'ils sont déclenchés. L'événement click nous donne un objet qui, par exemple, contient les coordonnées où nous avons cliqué. Et l'événement input nous donne aussi des données, des informations sur l'événement.

Maintenant nous pouvons capturer ces données avec l'événement dollar passé comme argument à la méthode que nous appelons ou utilisé n'importe où entre ces guillemets dans le code que nous exécutons. Le signe dollar event, c'est quelque chose à garder à l'esprit. Réservez le mot qui nous donne accès aux données de l'événement.

Donc maintenant on passe ça à la mise à jour du nom du serveur. Donc ici nous savons que nous allons recevoir cet événement et il sera de type any pour le moment. Maintenant, nous allons simplement l'enregistrer dans la console afin de pouvoir le voir dans ce console de débogage.

Si nous faisons cela et que je tape quelque chose ici, regardez la console sur la droite. Quelques sorties ont été écrites ici. Quatre pour être précis, car j'ai tapé quatre caractères et effectué quatre touches. Donc l'événement input a été déclenché quatre fois. Et si nous jetons un coup d'œil à cet événement, nous avons quelques informations ici.

Par exemple, target. Et le target est simplement l'élément HTML sur lequel cet événement s'est produit. Donc ici sur le target, puisque c'est un élément d'entrée, si on fait défiler vers le bas, on a aussi le test de la valeur et c'est ce que l'utilisateur a entré

Maintenant que nous avons vu comment utiliser l'objet événement du signe dollar pour récupérer les données de l'événement, passons à la liaison de données bidirectionnelle. Pour cela, nous allons utiliser la directive v-model, qui permet de lier la valeur d'un champ de formulaire à une propriété de notre composant, mais également de mettre à jour cette propriété lorsque la valeur du champ est modifiée. Nous allons donc ajouter un autre champ de formulaire pour le mot de passe du serveur, utiliser la directive v-model pour lier sa valeur à une propriété de notre composant, puis afficher cette propriété à côté du nom du serveur. Ensuite, nous allons ajouter une méthode pour afficher un message d'alerte lorsque l'utilisateur clique sur le bouton "Créer le serveur", puis utiliser la directive v-on pour écouter l'événement click du bouton et appeler notre méthode. Finalement, nous aurons une petite application d'exemple complète pour montrer comment utiliser les directives v-model et v-on pour la liaison de données et l'écoute des événements.