Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Angular 2

Passer des variables à un sous-module

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous remarquerez que le passage de variable d'un parent vers l'enfant n'est pas automatique. Il faudra vous en charger vous-même pour contrôler les flux.
03:23

Transcription

Allez, on y presque, on va faire fonctionner ce composant. Que nous manque t-il maintenant ? Une toute dernière chose. Ca va se passer où ? On va fermer tout ce qui a là, entre notre composant item donc le item qu'on a là ; item.ts On va double cliquer dessus. Et notre template qui se trouve à côté, qui est le template qui appelle. Ce template qui appelle, il itère, il est en train de faire une itération sur la collection, il passe des items. Cet item qui se trouve ici est la représentation de notre modèle. Que l'on va devoir passer au composant item.ts Pour faire un passage d'information entre un parent et un enfant, il faut absolument que vous importiez input, input est la classe Angular qui permet de définir les choses qui peuvent entrer dans le composant enfant, et pour les définir, c'est assez simple, et pour les rendre disponibles, il suffit au démarrage de votre classe, de référencer input, comme celui-ci, de dire que vous attendez derrière input, un item, du type certainement item aussi. Attention, parce qu'on va avoir ici des petits conflits. Faites attention que ce que vous attendez c'est item en minuscules, qui sera utilisé dans le composant et dans le templating ; item.html qui doit être typé avec le modèle item. Alors si je référence le modèle item comme ça, et que je viens importer ce qu'on a déjà fait, le modèle item, vous êtes obligés si vous voulez référencer, d'importer à l'avance. Attention, il porte avec une minuscule. Ici, je vais importer depuis quoi ? Depuis model, on l'a déjà fait aussi, models item, je vais avoir un conflit. Mais vous savez faire pour résoudre les conflits, on va simplement ici, dire item model et on en parle plus, c'est un item model qui entre. Là vous venez de référencer quelque chose qui peut entrer, qui peut être passer au sous-composant, avec les inputs, les inputs permettent de faire des passages. Comment on fait des passages ? C'est très simple. Ce composant est en capacité de prendre un item et le récupérer pour l'afficher. Pour faire le passage, vous allez utiliser des crochets, vous allez dire que, dans item pour le composant, vous injectez et envoyez l'item qui est en train d'être répété, donc c'est celui-ci, qui va entrer à cet endroit-là, il va être injecté dans le composant, puisqu'il a un input et qui va arriver ici. Ça va référencer directement this item qui sera utilisé dans le template. Assez simple, franchement pas compliqué au niveau de l'écriture, par contre il faut respecter un petit peu. Voilà comment écrire un input rentrant à l'intérieur, avec input, item, item model, et là normalement, votre template est de retour. Est-ce que le détail fonctionne ? Non ! Pourquoi ? Parce que ça c'est des événements. L'événement que vous avez référencé dans votre template ; item.html qui se trouve ici. Pour le moment, le get details n'est absolument pas disponible dans votre composant item. Il fait partie de votre composant parent. Ça c'est une subtilité que l'on verra un petit peu plus tard, effectivement, on peut relier également et donc soulever quelque chose quand il se passe un truc, et le remonter au parent, pour utiliser ce que le parent doit faire. C'est encore une subtilité, mais en tout cas, vous avez vu comment découper du templating, mais pas comment faire fonctionner les actions, mais vous savez déjà faire des sous-composants, c'est une grande étape car ça permet d'avoir un code plus propre.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !