Angular - 2-10 Comprendre pleinement le sélecteur de components

Nous avons beaucoup appris sur les composants, les modèles, les options dont nous disposons et sur les styles. Nous allons maintenant nous concentrer sur la dernière propriété que nous voyons dans ce décorateur de composant pour le moment : le sélecteur.

J'ai déjà mentionné qu'il doit s'agir d'un sélecteur unique, afin de ne pas écraser accidentellement un élément déjà existant ou peut-être un composant mis à disposition par un autre package tiers que vous utilisez dans votre projet. Il existe toutefois une information à propos du sélecteur. Cependant, vous n'êtes pas obligé d'utiliser ce type de sélecteur.

Pour l'instant, notre sélecteur est le même que celui que nous utilisons en CSS pour sélectionner un élément, donc nous avons "app-servers" ici comme un élément et c'est reconnu par Angular parce que le sélecteur que nous avons choisi est "app-servers" et cela ressemble essentiellement à la façon dont vous utilisez les éléments de sélection en CSS.

On sélectionne l'élément h3 en tapant simplement "h3" ici, on sélectionne l'élément "app-servers" en tapant "app-servers" ici. Donc cela fonctionne comme un sélecteur CSS et vous n'êtes donc pas limité à la sélection par élément. Vous pouvez le mettre entre crochets pour utiliser le sélecteur d'attribut, donc en CSS, vous pouvez sélectionner des éléments par attribut en mettant cet attribut entre crochets.

Et maintenant si vous enregistrez ça, vous verrez que notre application est en fait cassée parce que si on regarde le message d'erreur, "app-servers" est un élément inconnu parce qu'à présent, notre code Angular ne reconnaît plus "app-servers" car nous avons changé le sélecteur en attribut. Donc pour que ça fonctionne à nouveau, il faudrait commenter ou supprimer cet élément et peut-être ajouter une div ou tout autre élément, un élément HTML normal qui a un attribut "app-servers" maintenant.

Maintenant avec cet attribut personnalisé ajouté, maintenant, l'application fonctionne à nouveau parce que maintenant, Angular sélectionne l'élément par l'attribut et non par l'élément lui-même car nous avons changé le sélecteur.

Une autre alternative est de sélectionner par classe et je vais juste commenter pour que le code soit toujours là pour référence, avec un point au début, ".app-servers", comme dans les CSS. Donc ici, nous pouvons maintenant sélectionner par classe, ajoutons une nouvelle div ici qui a une classe CSS de "app-servers", que nous pouvons bien sûr styliser aussi mais en plus, c'est aussi reconnu par Angular comme un sélecteur, c'est pourquoi nous voyons toujours l'application.

Maintenant, ce sont toutes les options que vous avez, en passant, sélectionner par ID ne fonctionnera pas, ce n'est pas supporté par Angular et tous ces pseudo-sélecteurs comme hover et ainsi de suite ne fonctionnent pas non plus. Et vous utilisez généralement le style des éléments ici, les serveurs d'applications pour les composants, nous en apprendrons bientôt sur les directives, une autre fonctionnalité où c'est différent mais pour les composants, vous créez généralement vos propres éléments et donc vous n'utilisez pas ce style, donc pas le style de l'attribut. À la place, vous utilisez les serveurs d'applications comme un élément mais il est important de comprendre que vous n'y êtes pas limité et qu'il peut y avoir des cas d'utilisation où vous voulez utiliser un sélecteur différent.