Angular - 2-8 Travailler avec des templates de components

Jusqu'à présent, nous avons toujours utilisé un fichier de modèle externe et nous n'avons rien fait concernant le style des composants, il est temps de changer les deux. Maintenant, au lieu d'utiliser un fichier modèle externe, vous pouvez également utiliser un modèle en ligne, ce qui signifie que vous définissez le code HTML dans le code TypeScript, même si cela vous semble étrange ? Eh bien, c'est possible.

Nous pouvons le faire en allant simplement dans nos composants de serveurs ici par exemple et maintenant, nous pointons vers ce fichier HTML ici, maintenant nous pouvons changer templateUrl en template, l'un des deux doit être présent, soit lié à un template externe ou juste le template à définir dans ce fichier. Mais chaque composant doit avoir un modèle, c'est la seule propriété que vous devez avoir à tout moment. Donc avec ça, je le change en template, maintenant on peut écrire notre code de template ici.

Donc ici on peut maintenant répliquer app-server, comme ceci, peut-être deux fois, nous devons nous assurer que nous n'enveloppons pas cette ligne parce que ce n'est pas pris en charge dans une chaîne TypeScript par défaut et si je sauvegarde maintenant, nous voyons le même résultat que précédemment. Donc, il semble que rien n'a changé et c'est bien dans ce cas, car nous essayons de faire en sorte que cela ressemble à ceci mais en fait, nous avons changé la façon dont nous configurons notre modèle ici, maintenant on définit le code HTML dans ce même fichier.

Et en fait si vous voulez écrire des chaînes de caractères multi-lignes ici, ce que vous voulez probablement si vous ajoutez plus de code HTML, vous pouvez passer d'une chaîne normale avec des guillemets simples à l'utilisation de cotes arrière pour utiliser des des expressions de modèle Javascript, pour pouvoir écrire des chaînes de plusieurs lignes entre les deux. Donc, maintenant, entre les cotes arrière d'ouverture et de fermeture, vous pouvez envelopper la ligne et écrire votre code HTML comme ceci.

Que devriez-vous utiliser ? Devriez-vous utiliser cette approche d'utilisation d'un modèle ou d'un fichier externe ? Cela dépend, si vous n'avez pas beaucoup de code HTML, l'utilisation d'un modèle en ligne comme ceci pourrait être bien, alors vous avez toute la logique dans le code TypeScript et c'est tout à fait correct. Mais dès que vous avez, disons, plus de trois lignes de code dans la partie HTML ici dans le modèle, l'utilisation d'un fichier externe est une bonne idée pour le rendre plus facile à suivre et plus facile à comprendre.

Il est important de garder à l'esprit que vous pouvez utiliser cette approche, que vous pouvez mettre vos modèles en ligne et, il est très important, que vous devez avoir au moins un modèle dans un composant. Vous pouvez omettre le sélecteur, vous apprendrez plus tard dans la section sur le routage une autre façon de charger les composants sans utiliser leur sélecteur et vous n'avez pas besoin d'ajouter des styles mais les modèles doivent être présents.

Voilà pour les templates, regardons les styles dans le prochain cours