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

Nous avons beaucoup appris sur les composants Angular : leurs templates, leurs options et leurs styles. Concentrons-nous maintenant sur la dernière propriété visible dans le décorateur @Component que nous n'avons pas encore détaillée : le selector. Comme nous l'avons vu, il doit être unique pour ne pas écraser accidentellement un élément existant ou un composant fourni par un package tiers utilisé dans le projet.

Jusqu'à présent, notre selector ressemble à app-servers : il est utilisé exactement comme un sélecteur d'élément CSS. On l'écrit dans le HTML comme une balise <app-servers></app-servers>, et Angular le reconnaît parce qu'il fait correspondre cette balise au composant. Mais ce que beaucoup ne savent pas, c'est que le selector Angular fonctionne en réalité comme un sélecteur CSS, ce qui ouvre d'autres possibilités.

Les trois formes de selector

Par élément (forme par défaut) : selector: 'app-servers', utilisé comme <app-servers></app-servers> dans le HTML.
Par attribut : selector: '[app-servers]', utilisé sur n'importe quel élément HTML comme <div app-servers></div>.
Par classe : selector: '.app-servers', utilisé comme <div class="app-servers"></div>.

Si on passe d'un selector par élément à un selector par attribut [app-servers] sans changer le HTML, l'application se casse : Angular ne reconnaît plus la balise <app-servers> comme un élément connu. Pour corriger, il faut remplacer la balise par un élément HTML standard (par exemple <div>) auquel on ajoute l'attribut app-servers. Même logique pour le sélecteur de classe : on utilise alors <div class="app-servers"></div>.

Petite nuance importante : sélectionner par ID (#app-servers) ou par pseudo-sélecteur (:hover) ne fonctionne pas avec Angular. En pratique, pour les composants, on utilise quasiment toujours le selector par élément, qui crée des balises personnalisées explicites. Les selectors par attribut et par classe sont surtout utilisés pour les directives, que nous découvrirons bientôt. Mais il est important de savoir qu'on n'est pas limité au selector par élément, et qu'il existe des cas où un autre type de sélecteur est plus adapté.

En résumé

Cette leçon explore la propriété 'selector' du décorateur @Component en Angular, en expliquant que vous n'êtes pas limité à la sélection par élément HTML. Le transcript couvre les trois façons principales de sélectionner un composant : par élément (app-servers), par attribut ([app-servers]), ou par classe (.app-servers), et met en lumière les limitations comme l'absence de support pour les sélecteurs d'ID et les pseudo-sélecteurs CSS. L'accent est mis sur l'importance de choisir un sélecteur unique pour éviter les conflits avec d'autres composants ou éléments existants.

Points clés

Le sélecteur d'un composant Angular fonctionne comme les sélecteurs CSS et accepte trois syntaxes : par élément (app-servers), par attribut ([app-servers]), ou par classe (.app-servers)
Les sélecteurs par ID et les pseudo-sélecteurs CSS (comme :hover) ne sont pas supportés en Angular
Il est crucial de choisir un sélecteur unique pour éviter les conflits accidentels avec d'autres composants ou éléments HTML existants dans le projet
Le style d'élément (app-servers) est généralement préféré pour les composants, tandis que les sélecteurs d'attribut ou de classe peuvent être utilisés dans des cas d'utilisation spécifiques

Questions fréquentes

Quelles sont les trois façons de définir un sélecteur de composant en Angular ?

En Angular, vous pouvez sélectionner un composant de trois manières : 1) Par élément HTML (app-servers), 2) Par attribut en utilisant des crochets ([app-servers]), ou 3) Par classe CSS en utilisant un point (.app-servers). Chacune fonctionne selon la syntaxe CSS correspondante.

Pourquoi ne pas utiliser un sélecteur d'ID pour un composant Angular ?

Angular ne supporte pas les sélecteurs d'ID pour les composants. De plus, utiliser un élément ou un attribut personnalisé est plus sûr et meilleure pratique car cela évite les conflits avec d'autres éléments HTML existants dans votre projet.

Est-ce que les pseudo-sélecteurs CSS comme :hover fonctionnent avec les sélecteurs de composants Angular ?

Non, les pseudo-sélecteurs CSS comme :hover ne sont pas supportés pour les sélecteurs de composants Angular. Seuls les sélecteurs simples (élément, attribut, classe) sont fonctionnels dans la propriété @Component selector.