Angular - 2-7 Création de composants avec le CLI et imbrication de componants

Dans les dernières vidéos, nous avons appris beaucoup de choses, y compris la création d'un nouveau composant à la main. Maintenant, il y a aussi une alternative à la création manuelle. Lorsque vous utilisez la CLI, vous pouvez ouvrir un nouveau terminal ou une ligne de commande en laissant la fenêtre ng serve active, c'est important, ne la fermez pas.

Dans cette nouvelle fenêtre, nous pouvons utiliser une commande CLI pour créer un nouveau composant. Disons que nous voulons avoir nos composants de serveur unique ici dans un autre composant, donc imbriqué dans un autre composant, un serveur, un composant à serveurs multiples.

Nous pouvons le créer manuellement en ajoutant un dossier servers avec notre composant ou nous utilisons la CLI avec ng et là nous avons une commande generate, qui nous permet de générer certains éléments supportés par Angular. Un de ces éléments est un composant, donc nous pouvons créer un nouveau composant avec ng generate component et ensuite passer le nom, servers comme ceci.

Vous pouvez également utiliser un raccourci et au lieu de ng generate component, vous pouvez dire ng g c qui fait la même chose. Si vous appuyez sur la touche Entrée, vous obtiendrez un nouveau dossier dans le dossier de votre application avec le nom de votre composant, servers et là, vous trouverez les mêmes fichiers que pour le composant d'application, HTML, CSS, TS et ce fichier spec qui est utilisé pour les tests.

Maintenant je vais le supprimer, nous aurons plus tard une section sur les tests et nous regarderons le style plus tard aussi, pour l'instant, disons que c'est dans ce composant servers que nous voulons afficher notre serveur unique. Nous avons déjà ce sélecteur, app server, donc dans ce template du composant servers, on peut remplacer le texte par défaut par app server et peut être simplement répliquer ceci afin d'avoir deux composants, car rappelez-vous, les composants sont réutilisables.

Nous pouvons utiliser le même composant aussi souvent que nous le souhaitons en utilisant simplement son sélecteur aussi souvent que nous le souhaitons. Donc maintenant nous avons deux serveurs ici et avec ceci dans notre composant serveurs, vous devez vous assurer que vous mettez également à jour le module d'application.

Maintenant, la CLI devrait le faire automatiquement, c'est pourquoi vous trouvez déjà l'importation et la déclaration dans ce fichier mais assurez-vous que vous l'avez vraiment ici. Avec ceci, nous pouvons aller dans notre fichier servers.component.ts pour vérifier le sélecteur qui est app-servers et ensuite nous pouvons aller dans notre fichier app.component.html et mettre à jour le sélecteur pour utiliser ce nouveau composant au lieu de l'ancien.

Avec cela, si nous sauvegardons maintenant et retournons à notre application, elle a l'air presque la même apparence qu'avant, nous voyons notre composant de serveur deux fois mais si on inspecte le code ici dans les outils de développement de Chrome par exemple, vous verrez que nous avons ce composant externe des serveurs d'application, ce composant nouvellement créé et entre les deux, nous avons deux composants de serveur d'applications uniques.

Donc, avec cela, nous avons appris quelques choses importantes sur la façon de créer des composants manuellement ou avec CLI