Angular - 5.11-Utilisation de références locales dans les modèles

De retour dans l'application que nous avons construite au cours des premières leçons de ce cours, nous avons utilisé notre composant d'élément anti-serveur de cockpit en utilisant la sortie et l'entrée pour faire passer des données autour de notre propre liaison de propriété et d'événement personnalisée.

Maintenant, dans le cockpit, j'utilise actuellement une liaison de données bidirectionnelle pour obtenir le nom et le contenu du serveur. Il n'y a rien de mal avec cela, mais nous n'avons peut-être pas besoin d'utiliser une liaison de données bidirectionnelle.

Puisque je ne veux enregistrer ou utiliser les données qu'au moment où je clique sur le bouton pour ajouter le add serveur ou le add serveur blueprint, il suffirait de récupérer la valeur de l'entrée à ce moment-là, et il y a une belle façon d'y parvenir. Je vais donc dupliquer cela et commenter l'ancienne solution, et maintenant je vais le structurer sur quelques lignes et supprimer la liaison bidirectionnelle.

Une référence locale peut être placée sur n'importe quel élément HTML, donc pas seulement sur un élément d'entrée, sur tout ce que vous voyez ici dans le modèle, et vous ajoutez avec un hashtag et un nom de votre choix, comme par exemple, server name.

Puisque c'est, eh bien, qu'est-ce que cette référence va contenir ? Une référence à cet élément. Donc peut-être server name input. La référence, comme je viens de le dire, tiendra une référence à cet élément. Donc pas de valeur, nous avons entré là-bas dans l'ensemble de l'élément HTML avec toutes ses propriétés.

Nous pouvons voir cela, si nous le passons maintenant en argument une fois que nous cliquons sur le serveur sur Add Server. Ici, je peux passer server name input parce que l'autre chose importante que vous devez savoir sur les références, en plus de la façon de les créer, c'est que vous pouvez les utiliser partout dans votre modèle, mais uniquement là, pas à l'intérieur de votre code TypeScript, uniquement dans le modèle. Mais nous appelons la méthode ici à l'intérieur du modèle, bien sûr.

Ici, nous pouvons utiliser l'entrée du nom du serveur, et c'est ainsi que nous pouvons la passer au code TypeScript. Parce que dans "ajouter un serveur", nous savons maintenant que nous recevrons l'input name. Vous pourriez également l'appeler "nameInput".

Et si nous enregistrons cela, nous pouvons analyser ce que cela signifie réellement, ce que nous avons réellement obtenu ici. Alors enregistrons cela et laissons notre application se recharger.

Maintenant, si je teste quelque chose et entre quelque chose ici, et lorsque je clique sur "ajouter un serveur", bien sûr, cela ne fonctionne pas ici car nous ne récupérons pas les données correctement pour l'instant. Vous voyez que nous avons en fait obtenu l'élément d'entrée lui-même. Donc voici l'élément que nous avons obtenu ici, c'est ce que nous donne la référence locale, l'élément avec toutes ses propriétés.

Les références locales sont une fonctionnalité très pratique pour accéder à certains éléments dans votre modèle et les utiliser soit directement dans le modèle, soit les passer comme argument à des méthodes pour les utiliser dans du code TypeScript. Maintenant que nous avons cette référence locale, nous pouvons nous débarrasser de la liaison de données bidirectionnelle que nous avons utilisée auparavant pour obtenir le nom et le contenu du serveur.