3

Tengo definido un componente personalizado:

@Component({
    selector: 'preload-image',
    template: `<img [src]="imgSrc">`,
    styleUrls: []
})
export class ImageWithPreloadComponent implements OnInit {
    @Input() src: string;
    @Input() srcPreload: string; 
    ...
    // codigo omitido para que no sea tan largo
}

el cual utilizo dentro de otro componente.

<preload-image class="small-image"
    [src]="'https://wsurveyw.blob.core.windows.net/multimedia/profile/ef6c883c-8cd6-48d6-84f4-b4f38b8d9a76.jpg'" 
    [srcPreload]="'/assets/preload-image/progress.gif'"
    [srcError]="'https://cdn.browshot.com/static/images/not-found.png'"></preload-image>    

El problema es que defino una clase css .small-image en en componente padre, pero el mismo no se esta aplicando al componente hijo. Mi duda es si hay alguna manera de aplicar estilos a un componente hijo desde el padre, en muchos componentes de terceros funciona sin problema hacer cosas como:

[style.width]="'100px'"
class="mi-clase-css"
style="width: 100px"

No entiendo porque no lo toma en mi componente personalizado.

2 respuestas 2

4

Este comportamiento tiene que ver básicamente con el modelo de encapsulamiento que estés usando en tu componente hijo, y es una propiedad que seteas en el decorador llamada encapsulation. Existen actualmente 3 tipos de encapsulamiento, Emulated, Native y None, siendo el primero el que provee Angular por default.

Como decía, el encapsulamiento default de angular es ViewEncapsulation.Emulated ( el Objeto ViewEncapsulation lo importas de @angular/core) y simula el funcionamiento de ShadowDOM agregando atributos random a cada componente y luego especificando las reglas de css que hayas definido dentro de tu componente con el atributo correspondiente, por ende, las reglas de css que definas en tu componente son válidas únicamente para ese componente.

Si inspeccionas tu HTML puedes ver que angular agrega clases y atributos a los componentes y sus hijos y se ven algo así:

<custom-component _ngcontent-c7 _nghost-c9 class="ng-tns-c7-4">
    <h1 _ngcontent-c9 class="title">Hola Mundo!</h1>
</custom-component>

Eso implica que la regla CSS que va a generar Angular para ese h1 con la clase .title es algo así:

.title[_ngcontent-c9] { ... }

Ahora, si tienes otro componente dentro de custom-component, a este se le va a generar su propio atributo custom, digamos, _nghost-c10 y los hijos de este tendrán el atributo _ngcontent-c10 en vez de _ngcontent-c9, por ende si usas la clase .title, el selector de ese elemento HTML será .title[_ngcontent-c10] y consecuentemente el estilo que definiste anteriormente no va a funcionar. El HTML se vería algo así:

<custom-component _ngcontent-c7 _nghost-c9>
    <h1 _ngcontent-c9 class="title">Hola Mundo!</h1>
    <other-component _ngcontent-c9 _nghost-c10>
        <h2 _ngcontent-c10 class="title">Chao Mundo!</h2>
    </other-component>
</custom-component>

Existen 3 alternativas para solucionar esto:

  1. Definir el estilo en styles.css de la carpeta src. Las reglas que definas allí no están asociadas a ningún componente, por lo tanto no se les agrega el atributo y afectan a toda la aplicación.
  2. Usar el selector :host /deep/ en la hoja de estilo de tu componente padre para determinar que quieres usar su atributo para declarar ese css. La sintaxis sería así :host /deep/ .title { ... } y el output sería [_nghost-c9] .title { ... }.
  3. Cambiar la encapsulación del componente hijo a ViewEncapsulation.None, así cualquier estilo que se defina en la cadena de ancestros del componente afecte a los nodos del elemento hijo (esta es la menos recomendable). Más información sobre estrategias de encapsulación aquí
4
  • Hola, con el selector :host /deep/ puedo añadir estilos al elemento del componente anidado, pero si el componente ya tiene un estilo definido se aplica este estilo, es decir no consigo sobreescribirlo. El inspector aparecen ambos activos y el nuevo por debajo del predefinido. Tengo un problema con un div donde hay un margin-left: 0 important! yo añadí un margin: 0 auto !important pero prevalece el primero.
    – Orici
    el 4 may. 2018 a las 11:02
  • Confirmo que ocurre lo mismo que he descrito en el comentario anterior si añades el estilo en styles.css
    – Orici
    el 4 may. 2018 a las 11:19
  • me imagino que la solución sería aumentar la especificidad de tu selector en el component padre... de todos modos, si tienes conflictos porque las dos declaraciones tienen !important, quizás sería mejor evitar usar !important en absoluto
    – Osman Cea
    el 4 may. 2018 a las 14:53
  • Realmente el problema es que el componente anidado ya tenga los estilos que requieres, en este caso el componente se añadió desde una fuente ajena. Y no hay forma de machacar lo que tiene definido, salvo quizá rompiendo la encapsulación, cosa que no voy a hacer. Ya solucione el problema concreto que tenía de forma indirecta, pero esta bien saber como va la cosa para casos futuros. Saludos.
    – Orici
    el 4 may. 2018 a las 21:08
0

Para asignar estilos a un componente hijo en angular, lo puedes hacer de la siguiente manera:

  • Elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
  • Elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
  • Elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
  • Elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
  • Elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
  • Elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.

Todo esto gracias a css3, te recomiendo buscar más información acerca de estilos css3, te ayuda bastante en la parte de diseño de tu app.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.