0
628
Vistas¿Cuál es la diferencia entre usar :host y no usarlo?
Encontré que el uso de :host en angular es muy confuso.
Por ejemplo, hay un archivo CSS a-component.component.css y su archivo HTML relacionado es a-component.component.html cuyo selector es app-a-component .
Y en el archivo CSS hay una declaración
h1 { font-size: 12px; } Creo que este CSS solo se aplica al elemento HTML <app-a-component> basado en la siguiente explicación, ¿es correcto?
Y si cambio el CSS a
:host h1 { font-size: 12px; } (agregando :host )
seguirá aplicándose al mismo elemento HTML <app-a-component> , porque es el elemento HTML anfitrión de este componente, ¿es correcto?
Si ambos son correctos, ¿por qué necesitaríamos :host dado que tiene el mismo efecto con o sin él?
¡Gracias por adelantado!
1 Respuestas
Responde la pregunta0
En su ejemplo :host h1 { ...} no hay diferencia. Donde :host se vuelve útil es cuando necesita usar ::ng-deep o desea diseñar el elemento host .
p.ej
Tiene un componente <my-component></my-component> y desea aplicar estilos directamente a ese elemento. Puede agregar los estilos con el selector :host .
:host { background: red; } Esto establecerá el fondo del elemento my-component en rojo.
Para :host ::ng-deep { ... puede deshabilitar ViewEncapsulation para esa regla, pero SOLO para los componentes descendientes. Si solo usara ::ng-deep sin el :host , se convertiría en un estilo global.