Angular - 5.6-Bind des événements personnalisés

Dans les dernières vidéos, nous avons appris quelque chose de crucial, quelque chose que nous utiliserons beaucoup dans notre application de démonstration et ce cours, et probablement dans n'importe quelle application : comment transmettre des données d'un composant à un autre composant qui y est implémenté. Maintenant, en ce qui concerne la direction supérieure, que se passe-t-il si nous avons un composant et que quelque chose change et que nous voulons informer notre composant parent, donc le composant qui implémente l'autre composant.

Par exemple, ici dans le composant d'application, nous implémentons le cockpit de l'application et dans ce composant enfant du cockpit de l'application, quelque chose peut changer car nous avons deux boutons ici et lorsque nous cliquons sur les boutons, nous voulons faire quelque chose. Et en ce moment, le code qui devrait normalement être exécuté était simplement mis en commentaire. Nous voulons donc informer notre composant parent, le composant d'application dans ce cas, qu'un nouveau serveur ou une nouvelle feuille de route a été créé. Dans notre composant d'application, nous voulons peut-être toujours implémenter ces deux méthodes. Alors ajoutez-les simplement ici.

Cependant, je vais ajuster les noms et dire onServerAdded. Parce que ces méthodes ne seront exécutées qu'après que ce bouton aura été cliqué. Donc pas une fois que le bouton est cliqué, mais par la suite. Une fois que nous avons vraiment fini de créer le serveur, pour ainsi dire. Donc onServerAdded et onBlueprintAdded semblent être des noms plus appropriés ici dans le composant d'application.

Ensuite, nous pouvons cependant mettre ce code en commentaire et créer quand même un nouveau serveur ou une nouvelle feuille de route. Cependant, cela ne fonctionnera pas comme prévu ici car nous faisons référence au nom du nouveau serveur et au contenu du nouveau serveur qui ne sont pas disponibles dans le composant d'application. Mais c'est exactement l'information que nous voulons transmettre du cockpit au composant d'application. Parce que le composant d'application est l'endroit central dans notre application pour le moment, qui gère cette série de services. Comment pouvons-nous émettre un événement, ou notre propre événement ? Comment pouvons-nous informer notre composant d'application ?

Il serait génial que cela ressemble à ça dans le cockpit de l'application. Donc, dans le fichier html du composant d'application où nous implémentons le cockpit de l'application, ce serait génial si nous pouvions écouter serverCreated, n'importe quel nom que vous aimez mais ce serait un nom approprié pour le type d'événement que nous voulons écouter. Bien sûr, cet événement n'existe pas par défaut. Donc, tout comme nous avons écouté le clic, maintenant nous voulons écouter un événement comme celui-ci, serverCreated. Et une fois que notre serveur a été créé, nous exécutons un certain code.

pour chaque paragraphe au format HTML :

Tout comme dans n'importe quel autre événement intégré comme "Click", ici sur le côté droit du signe égal entre les guillemets se trouve une fonction qui est déclenchée lorsque l'utilisateur clique sur le bouton.

Cette fonction est appelée "myFunction", mais elle peut être nommée comme vous le souhaitez. Il est important de garder à l'esprit que le nom doit être unique et ne doit pas avoir d'espaces ou de caractères spéciaux.

Ensuite, à l'intérieur de la fonction, nous avons une variable appelée "x" qui contient la valeur de l'élément HTML avec l'ID "myText".

Cela signifie que lorsque la fonction est appelée, la valeur du texte dans l'élément HTML avec l'ID "myText" sera stockée dans la variable "x".

Enfin, la fonction change la valeur de l'élément HTML avec l'ID "demo" en utilisant la méthode "innerHTML". Dans ce cas, la valeur est "Hello World!".

Cependant, vous pouvez changer la valeur pour ce que vous voulez afficher. Vous pouvez également utiliser une variable pour stocker la valeur que vous souhaitez afficher et l'utiliser à la place de la chaîne de caractères "Hello World!".

En résumé, cette fonction simple permet de changer le contenu d'un élément HTML lorsque l'utilisateur clique sur un bouton. C'est une technique très utile pour créer des interactions utilisateur dynamiques dans vos projets web.

Tout comme dans n'importe quel autre événement intégré comme "Click", ici sur le côté droit du signe égal entre les guillemets, il y a une fonction qui sera appelée lorsque l'événement se produira. Cependant, plutôt que d'avoir une fonction séparée, nous pouvons utiliser une fonction anonyme, ou une fonction sans nom, directement dans le code. Cette fonction sera exécutée lorsque l'événement se produira.

Ce type de fonction est souvent utilisé lors de la définition d'événements sur des éléments HTML, tels que des boutons ou des liens. Par exemple, si nous voulions appeler une fonction nommée "envoyerFormulaire()" lorsqu'un utilisateur clique sur un bouton, nous pourrions utiliser le code suivant :

<button onclick="envoyerFormulaire()">Envoyer</button>

Cependant, nous pouvons également utiliser une fonction anonyme pour accomplir la même tâche :

<button onclick="function() { /* code pour envoyer le formulaire */ }">Envoyer</button>

De cette façon, nous n'avons pas besoin de déclarer une fonction séparée juste pour gérer l'événement. Nous pouvons simplement utiliser une fonction anonyme directement dans le code HTML. Cela peut être utile pour des fonctions simples qui ne seront utilisées qu'une seule fois dans le code.

Les fonctions anonymes peuvent également être utilisées en JavaScript pour créer des fonctions dynamiques qui peuvent être passées en tant qu'arguments à d'autres fonctions. Par exemple, si nous avions une fonction appelée "effectuerAction()", qui prend une fonction en argument et l'exécute, nous pourrions utiliser une fonction anonyme pour créer une action spécifique à exécuter :

effectuerAction(function() { /* code pour effectuer une action spécifique */ });

En utilisant une fonction anonyme de cette manière, nous pouvons créer des fonctions dynamiques qui peuvent être utilisées dans différents contextes, sans avoir à définir une fonction séparée pour chaque contexte.

En résumé, les fonctions anonymes sont des fonctions sans nom qui peuvent être utilisées directement dans le code, souvent pour gérer des événements sur des éléments HTML ou pour créer des fonctions dynamiques en JavaScript. Elles sont particulièrement utiles pour des fonctions simples qui ne seront utilisées qu'une seule fois dans le code.

En tant qu'utilisateur dynamiques dans vos projets web, il est important de comprendre comment et quand utiliser des fonctions anonymes pour améliorer l'efficacité et la clarté de votre code.