Angular - 5.12-Accéder au modèle et au DOM avec @ViewChild

p>Dans la dernière vidéo, nous avons appris à propos des références locales. Maintenant, il y a aussi un autre moyen d'accéder aux références locales ou à n'importe quel élément, en fait, directement depuis notre code TypeScript. Pour l'instant, nous passons la référence ici lorsque nous appelons une méthode, et cela fonctionne bien, mais parfois, nous voulons y accéder avant d'appeler une méthode. Et il existe un petit décorateur sympa que nous pouvons utiliser en TypeScript pour accéder à cela.

Reprenons au Server Content. Ici, je vais rapidement dupliquer cette entrée et commenter l'ancienne solution en utilisant la liaison bidirectionnelle et la nouvelle solution n'utilisera pas la liaison bidirectionnelle, mais plutôt aura également une référence locale, on va mettre serverContentInput. Maintenant, dans le composant du cockpit, je commenterai également le nouveau serverContent ici et j'ajouterai une nouvelle propriété que j'appellerai serverContentInput. Maintenant, serverContentInput comme ceci n'est qu'une propriété, mais nous pouvons ajouter à View Child devant ce décorateur avec des parenthèses et nous devons importer View Child depuis Angular Core. Maintenant, View Child comme ceci ne fonctionnera pas. Nous devons passer un argument ici. Et cet argument est en fait le sélecteur de l'élément. Comment nous voulons sélectionner l'élément. Et le sélecteur maintenant, n'est pas comme un sélecteur CSS, mais par exemple, nous pouvons simplement passer en tant que chaîne, le nom d'une référence locale. Ainsi, le contenu du serveur peut maintenant être passé en tant que chaîne. Si vous ne voulez pas passer une chaîne, mais vous voulez sélectionner un composant, vous pouvez simplement passer le type de composant ici. Ainsi, dans le cockpit, nous n'utilisons pas d'autres composants, mais dans le composant de l'application, nous pourrions passer le composant de cockpit de cette manière, pas comme une chaîne, pour accéder à la première occurrence de ce composant de cockpit dans le composant de l'application. Mais ici, je vais revenir à l'accès à la référence locale, ce qui est probablement le cas d'utilisation que vous verrez le plus souvent. Et avec cela, nous obtenons maintenant accès à notre serverContentInput. Maintenant, qu'est-ce que cela contient réellement alors?

Commentons rapidement ce code, pour éviter les erreurs. Et faisons un console log de ce serverContentInput. Ainsi, notre propriété ici, qui est en quelque sorte définie par View Child. Donc avec cela, si je commente également cela ici, pour que nous puissions exécuter notre application. Et si maintenant je sauvegarde cela et que nous retournons à notre application et que je saisis quelque chose ici et que je clique sur ajouter serveur, nous voyons que cela est de type "element ref". Ainsi, contrairement à la référence locale que nous avons passée directement depuis le modèle via la méthode, qui était l'élément lui-même, cela est de type "element ref". Nous pouvons donc définir ce type ici. "Element ref" est une référence à cet élément. Il est nécessaire d'importer "Element ref" depuis Angular Core, car il s'agit de l'une de ses fonctionnalités clés. Passons maintenant à la fonction addServer(), qui est appelée lorsque nous cliquons sur le bouton Ajouter serveur. Tout d'abord, nous obtenons la valeur saisie par l'utilisateur dans la zone de texte du formulaire en accédant à la propriété value de l'élément input. Ensuite, nous créons une instance de notre modèle de données serveur en utilisant cette valeur. Nous appelons ensuite la méthode serveurAjoute, qui est définie dans notre service serveur, en passant l'instance du serveur créé en tant que paramètre. Cette méthode ajoute le serveur à notre liste de serveurs stockée dans le service serveur. Enfin, nous réinitialisons le formulaire en appelant la méthode reset() de l'élément form. En résumé, ce code définit un composant de formulaire pour ajouter des serveurs à une liste de serveurs stockée dans un service Angular. Nous avons vu comment utiliser View Child pour accéder à l'élément HTML du formulaire, comment récupérer la valeur saisie par l'utilisateur, comment créer une instance de notre modèle de données serveur, comment appeler une méthode dans notre service serveur pour ajouter le serveur à la liste, et enfin comment réinitialiser le formulaire.