Vengo de un entorno HTML CSS Javascript y recién comencé a aprender Angular con su tutorial oficial "Tour of Heroes".
Noté que el tutorial oficial y otros Youtubers cuyos videos he estado viendo, se refieren al selector del componente como CSS Selector. No entiendo por qué se incluye CSS en el término aquí.
Por lo que he entendido, el selector de un componente busca una etiqueta coincidente en el componente raíz/principal y es una etiqueta html en una página html.
No puedo entender cómo CSS entra en escena para que el término sea un selector de CSS
@Component({ selector: 'app-heroes', //This is what I am referring to. templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.scss', './test.scss'] })
Un selector en CSS define una regla sobre cómo hacer coincidir con el DOM, determinando dónde/cuándo se aplica una regla de estilo determinada. En Angular, los selectores de directivas/componentes también usan estos mismos selectores para definir a qué elementos se aplican. Los selectores de elementos (como "app-my-component"
) para componentes son lo que verá la mayor parte del tiempo, pero no está limitado a ellos.
Por ejemplo, podría escribir un componente con un selector de "a[href]"
que coincida con cualquier a
que también tenga un atributo href
. De hecho, incluso podría usar un selector de "[href]"
, haciendo coincidir cualquier elemento con dicho atributo. Incluso podría usar un selector como ":not([href])"
para aplicar su directiva en cualquier elemento que no tenga dicho atributo.
En la práctica, esto puede ser bastante útil, especialmente para las directivas. De hecho, si observa el código fuente de la directiva RouterLink de Angular, encontrará que en realidad está implementada como dos directivas separadas, una con un selector de a[routerLink]
y otra con un selector de :not(a)[routerLink]
.