Découvrir Angular 2

Attacher un sous-module à un composant

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois créé, le sous-module doit être relié. Apprenez à déclarer une directive et à l'exécuter sur un parent.
03:19

Transcription

L'activation d'un composant, c'est pas très compliqué. Mais, ça va soulever des erreurs, ne vous inquiétez pas, c'est normal, on verra dans la suite de la vidéo, comment on fait pour éviter les problèmes. Bon, d'abord voyons comment on va l'importer. Notre problématique c'est qu'il a le même nom que notre modèle. Oui, mais c'est fait exprès. Vous vous doutez bien que je fais des trucs exprès pour vous montrer. Sinon je vous montre pas, et puis vous ne saurez pas et allez buter sur le problème. Ça arrive quand on démarre avec de nouveaux langages, de nouveaux frameworks. D'abord, pour activer le composant, on va devoir utiliser, sur le composant parent, dans lequel on veut rendre le composant qu'on a crée, une instruction, dans sa déclaration à lui, de composant. Je m'explique, ici on va rajouter dans app.component.ts ; directive. Directive, avec un tableau, permettra d'activer une ou plusieurs directives que l'on veut activer. Les directives sont des sous-composants, c'est ce qu'on a fait, on a créé un composant qui sera non pas utilisé en tant que page, que composant parent, mais qui sera utilisé en tant que composant enfant. Un composant enfant, c'est une directive. Il va bientôt falloir l'ajouter, si on ne l'ajoute pas, on ne pourra pas le référencer comme directive. Ça marche pareil, import ici, et item. Depuis quoi ? Depuis le dossier dans lequel on se trouve, et item Ça c'est bon. Ce qui n'est pas bon, c'est que ça porte le même nom. Comment faire la différence dans le code entre item et item en-dessous ? Avec as, vous avez la possibilité, c'est comme des name space, c'est pareil, de référencer un alias. Ici, on va l'appeler item component. C'est pas un problème, on aurait pu l'appeler à la base item component mais vous pouvez aussi l'utiliser comme ça as item component. Maintenant on va le référencer. Dans directive, vous allez référencer que vous allez utiliser ce composant enfant. Pour le rendre disponible réellement, il va falloir référencer la balise qui permettra ici de rendre ce template-là. C'est quoi cette balise ? C'est ce qu'on a référencé ici en tant que sélecteur. Le sélécteur qu'on a là, c'est item. Il va falloir mettre dans notre template parent, ce sélecteur-là, pour que cet enfant soit rendu directement. Notre template parent, c'est le app.component.html qu'on a là. On a envie de faire le rendu à cet endroit-là, on va donc référencer item comme ça, et c'est tout ce qu'on a à faire pour relier un sous-composant à un composant parent. Je récapitule, vous avez un composant parent app component, qui prend une directive item component, c'est le composant item component, donc c'est item qu'on a ici, celui qui se trouve là. C'est item.ts qu'on a référencé ici comme étant un composant avec un sélecteur item, et un template ; item.html Pour le moment pas de souci, ça fonctionne. Si vous retournez dans votre exécution de page, vous allez voir que ça fonctionne, pas de problème, il l'a fait trois fois, il a bien implémenté le bon template, par contre on a des petites erreurs. Pourquoi ? Parce qu'il n'arrive pas à récupérer les propriétés qu'on lui référence, par exemple state. C'est quoi la propriété state si on va voir dans le composant ? Dans item.html, le state c'est le state qu'on a sur les items. Dommage, on a pas les informations et on arrive pas à les récupérer. Comment on fait pour lui passer des infos alors ?

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 !