Angular 2 : Dynamisation des applications

Se câbler sur les rendus de contenu

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les rendus de contenu d'AngularJS bénéficient du système d'évènements. Ils vous permettent d'interagir avant et après le rendu.
06:07

Transcription

Si à un moment ou un autre dans votre application vous devez venir agir sur un élément particulier de l'interface On a 2 façons de faire L'une qu'il ne faudra jamais utiliser et l'autre qui est recommandée Alors bien sûr vous pourrez utiliser la première si vous le souhaitez mais je vous le conseille vraiment pas mais je vais vous expliquer pourquoi Souvenez-vous on a parlé rapidement des différents hook d'évènements et on a dit également qu'il y a une construction qui est faite Vous vous rappelez du ngAfterViewInit quand Angular a terminé d'initialiser la vue Celui-là il est extrêmement important parce que ça veut dire que la vue est construite, que les éléments HTML sont bien en place et qu'il y a pas de problème, on ne peut pas avoir de souci d'interface ou de choses qui viennent interférer C'est dans celui-ci que vous viendrez injecter des choses ou travailler avec l'interface Vous pourriez le faire sur le constructeur le problème c'est que le constructeur si vous vous souvenez bien il arrive au tout début il a pas forcément connaissance de tout et absolument tout n'est pas forcément monté Donc je vous conseille de ne jamais utiliser la récupération d'éléments dans le constructeur, mais c'est possible, vous pouvez le faire 2 possibilités donc de faire la première c'est de faire un constructeur el comme ça et de passer ElementRef ElementRef vous voyez qu'il est ici au dessus donc au constructeur vous pouvez connaitre l'élément constructeur l'élément constructeur c'est l'élément parent Concrètement c'est l'élément qui existe déjà au début dans le templating c'est en fait le premier qui est construit Si je regarde mon item html mon élément parent qu'est-ce que c'est c'est la div, c'est cette div-là qui est intéressante et qui va nous permettre de travailler Oui et non Pourquoi oui et non parce que si vous regardez bien ici moi j'ai demandé à l'intérieur de récupérer l'information et je vois bien qu'ici je me retrouve avec une div item en fait c'est un item que je récupère et c'est pas la div d'en dessous Pourquoi parce que souvenez-vous c'est un composant item donc forcément c'est l'item qu'on récupère Mais c'est quasiment la même chose que l'autre C'est à dire qu'on va avoir de l'information ici mais on aura peut-être pas une information complète et donc ça peut nous poser problème Donc quand vous utilisez le constructeur comme ça gardez à l'esprit que on peut le faire mais on aura peut-être pas tout et on peut avoir des beug Donc c'est pas la meilleure des manières de faire Donc ça je vais le supprimer parce que je pars du principe qu'il faudra jamais le faire vous l'avez vu si vous voyez des exemples comme ça vous le ferez pas, vous avez d'autres méthodes pour faire ça La meilleure des méthodes c'est de se baser sur l'évènement ngAfterViewInit Parce que la vue est construite absolument tout est à l'intérieur et on a plus de problème et on peut faire ce qu'on veut avec l'interface l'interface html j'entends bien Donc là vous aurez accès à toute la pi html si vous la connaissez pas je vous invite à aller regarder un peu ce qu'il est possible de faire avec html et en javascript on peut agir sur les éléments et bien évidemment on a accès à toutes les propriétés Maintenant comment je vais faire pour récupérer une référence Ce qui est très intéressant c'est que vous pouvez en récupérer plusieurs Vous pouvez agir sur une div, vous pouvez agir sur un champ de texte sur absolument tout ce qui se trouve à l'intérieur Ce sera pas un problème et je vais vous montrer comment D'abord il faut importer viewChild qu'on a là-haut et puis ensuite on va le référencer à viewChild on va lui donner un nom divref Et ensuite on va attribuer une propriété de la même manière qu'on attribue une propriété comme ça donc divref Je vous conseille de la mettre en any parce qu'on sait jamais ce qu'on va récupérer dedans donc concrètement on la récupère c'est une référence elementRef Vous pourriez aussi tout à fait garder elementRef et dire que ce que vous allez récupérer ici c'est elementRef Vous savez que de toute façon vous allez récupérer quoi qu'il arrive de l'elementRef donc peu importe vous le mettez vous le mettez pas any ça vous permet de dire que vous récupérez tout et n'importe quoi ça peut être utile dans certains cas Alors maintenant qu'on a fait ça Ça veut dire que quand la vue va être construite il va s'occuper de venir passer l'élément qu'on aura mis en référence à qui on aura donné la référence divref à l'intérieur de la propriété divref Et c'est bien parce que ça on va pouvoir le récupérer Mais récupérez-le uniquement au ngAfterViewInit Parce que c'est là qu'on va pouvoir travailler avec Moi ce que j'ai câblé c'est juste un console.log de divref pour pouvoir l'afficher Comme ça j'ai accès à l'intérieur et au native element Le native element c'est l'élément natif final donc si j'ai envie de récupérer celui-là pour travailler avec sans aucun problème je peux ici faire native element Et j'enregistre et effectivement ce qu'on va avoir en console ce sera l'élément natif final la div Et ça c'est bien parce que à l'intérieur j'ai aussi tout ce qui compose la div donc concrètement les 2 div, le content le p avec le nom du client etc et là tout est aplati donc je peux travailler avec Étant donné que je suis en html javascript j'a accès à toute la pi et donc je peux tout à fait venir travailler sur les méthodes attacher des évènements, travailler avec d'autres librairies javascript pourquoi pas en injectant de la logique là-dedans On peut faire absolument tout ce qu'on veut avec l'élément c'est comme ça qu'on le récupère et qu'on vient travailler dessus On pourrait tout à fait venir rajouter du contenu aussi sans aucun problème, c'est pas un problème vous pouvez faire des inr html dessus, créer des éléments etc on a accès à tout Attention parce que pour pouvoir le récupérer comme ça via viewChild il va vous falloir référencer la référence Et la référence comment on va référencer que c'est cet élément là qui va prendre cette référence et qui sera passé en divref eh bien comme ça Vous allez utiliser #divref pour récupérer une référence Là je l'ai placé sous la div mais je suis pas obligé regardez Je peux le placer où je veux et c'est bien parce que là c'est pas l'élément constructeur Donc du coup comme je suis en train de choisir ce que je veux afficher, je peux le faire sur tout Je pourrais me dire que c'est mon p ici qui est ma référence et à ce moment là ce que je vais récupérer ici ce sera le p Je vous conseille de placer comme ça des références sur les éléments que vous allez devoir traiter ensuite dans vos controlers parce que vous le faites proprement vous le faites au travers d'Angular il peut pas y avoir d'effet de bord particulier puisque là vous êtes dans un contexte objet qui crée pour vous les différentes références que vous allez pouvoir utiliser C'est la meilleure manière de faire et c'est comme ça qu'on va venir travailler sur l'interface avec une référence qui est passée directement à un autre composant et qu'on peut ensuite à l'intérieur et là on va pouvoir maintenant travailler récupérer de l'info et pourquoi pas la modifier complètement

Angular 2 : Dynamisation des applications

Apprenez à dynamiser vos applications avec AngularJS. Créez un module parent, utilisez le moteur d’animation intégré, découvrez les cycles de vie disponibles, etc.

2h03 (28 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 oct. 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 !