Découvrir Angular 2

Faire fonctionner les actions entre modules

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Une action sur l'enfant ne se répercutera pas toute seule au parent. Voyez comment faire remonter l'information.
05:03

Transcription

Vous avez vu de la communication entre parents et enfants. Comment on a fait ? On a utilisé des inputs, qui nous ont permis, dans le template ici, de passer de l'information à l'enfant. Maintenant, si j'ai envie que mon enfant réponde au parent et puisse lui donner des informations, comment je vais m'en sortir ? Au même titre que les inputs, on a les outputs. Les outputs vont nous permettre de référencer des informations, directement sur l'enfant, qui vont être répercutées aux parents. C'est génial, parce que vous allez avoir une communication dans les deux sens. Avec les outputs, vous allez être obligés d'utiliser le système d'événement disponible sur Angular, au travers de la classe EventEmitter. Ne vous inquiétez pas, ça peut paraître compliqué, mais ça ne l'est pas du tout, si on a bien compris. Alors, comment ca va marcher ? D'abord, il faut savoir que la fonction get detail, que l'on a ici, va devoir être déclenchée sur l'enfant, sans aucun problème. On va juste enlever le 2 qui ne sert à rien, elle va garder l'événement, c'est elle qui va annuler le clic. On va la remettre ici, on va récupérer celle qui était sur le parent ici, mais elle ne va pas faire tout à fait la même chose. Celle du parent se retrouve sur l'enfant, elle prend bien l'événement, elle ne prend pas le parameter, on en a pas besoin, c'était un test. Elle va annuler le clic souris, avec event primer default qu'on a déjà vu. Et ici, elle ne va pas appeler quoi que ce soit, elle va soumettre un événement qui sera écouté, récupéré par le parent qui va soulever quelque chose. Il faut préparer le output; at output qu'on a ici, output, comme ça. Ça va être une fonction qu'on va référencer. Je vais référencer ; on get details, mais vous pouvez référencer ce que vous voulez, qui va être égale à un EventEmitter ; new EventEmitter. Faites attention, l'EvenEmitter est une fonction, et faites attention aussi à avoir les bons mots, sinon il vous criera dessus. Ça c'est génial, le tooling est cool car dès que vous avez un problème, vous avez quelque chose de souligné en rouge, vous ne pouvez pas vous tromper. Dès que vous avez créer un EventEmitter, vous allez devoir l'utiliser. Quand je clique sur get detail, je veux qu'un événement soit soulevé et envoie de l'information au parent. Pour faire ça, vous allez devoir, dans votre get detail, dire que this.ongetdetail va envoyer de l'information. Qu'est-ce que ça va envoyer? Ça va faire un emit de this.item, c'est à dire de l'item qui est utilisé dans le template actuel. Vous savez que, cet item.ts est répété trois fois, donc forcément, à chaque fois c'est un item différent, quand je vais cliquer, je vais vouloir soulever l'événement et envoyer le bon item actuellement utilisé. Bien sûr, vous l'avez compris, c'est l'item qui est passé. L'item passé va être renvoyé au parent pour maintenir la communication entre les deux. De ce côté là, rien à faire, le item.htms envoie bien le detail avec l'event, c'est parfait. Ensuite, ça va soumettre un événement qui doit être lu par le parent. Le parent, on va le préparer un peu aussi. Le parent va être on get detail qui s'appelle ici on get detail mais qui pourrait s'appeler différemment aussi. Si vous ne voulez pas vous mélanger, mais moi je vais le garder comme ça, qui va prendre un item en paramètre et qui va faire un console.log de l'item qui est passé, pour qu'on aie bien la bonne information et qu'on soit sûr que tout fonctionne. Attention, c'est là que ça ce corse. On a tout référencé, maintenant il va falloir, sur le app component ici, au même titre que ce qu'on a fait là, c'est à dire qu'on a préparé le input, il faut préparer le output. Comment on prépare le output ? Là c'était des crochets pour le input, c'est des parenthèses pour le output. Vous voyez bien que la communication ; d'un côté ça rentre et de l'autre ça sort. On va devoir lui dire quel est l'événement d'output que je veux insérer, que'est-ce que je vais insérer dedans ? Ça va être ici, le on get details, et ici, qu'est-ce qui va être lu par le parent ? Quelle est la fonction parente qui sera appeler quand on get details va se déclencher ? Pour moi, ça va être le même nom car j'ai gardé les mêmes noms; on get details. Attention ici, c'est une fonction. Si vous faites comme ça, vous pourriez vous dire que c'est génial, j'ai terminé, maintenant je vais de l'autre côté et je clique sur détails. Là j'aurai bien le console.log du parent qui va se déclencher, mais undefined à l'intérieur. Vous l'avez déjà vu, un EventEmitter est un émetteur d'événements, les événements vous les avez déjà vu ici, vous savez comment on les utilise. Et bien, il faut faire la même chose, quand vous soulevez un événement avec une fonction, vous êtes obligés de passer à cette fonction, le dit-événement si vous voulez récupérer l'info. Alors dans notre cas, qu'est-ce qui est envoyé à l'événement this item, qui sera lu par le parent car on a mis detail dans la fonction on get details. Ce qui veut dire que notre dollar event qu'on a ici, correspondra à this item qui sera passé au parent. Si vous faites ça normalement, vous chargez la page, vous cliquez sur détails et vous aurez à cet endroit là, l'item qui passe à chaque fois qu'on clique, ce sera bien le bon item. Vous venez de créer une communication complète entre un parent et un enfant. Des choses qui entrent dans l'enfant, et qui vont permettre d'être affichés dans le template, des choses qui sortent de l'enfant pour aller vers le parent, qui vont permettre de garder et de maintenir une communication entre les deux

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
Date de parution :6 sept. 2016

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 !