2

Tengo una sección que se repite en varios componentes y los estilos CSS son iguales para todas ellas. Para dejar el código más limpio, he quitado los estilos repetidos de cada una de las hojas de estilos CSS de los componentes y lo he puesto todo en la hoja de estilos del componente padre. No obstante, cuando lo hago no me los reconoce... ¿Será que he olvidado enlazar algún fichero? Soy nuevo en Angular.

Por ejemplo, tengo los siguientes componentes:

<app-root>
    <componente-hijo1>...</componente-hijo1>
    <componente-hijo2>...</componente-hijo2>
    <componente-hijo3>...</componente-hijo3>
</app-root>

En cada componente hijo tengo, por ejemplo, la clase ".prueba" con una serie de atributos CSS asociados.

.prueba {
    background-color: red;
    color: blue;
    ...
}

Lo que quiero es no repetir código y en lugar de tener esa clase en cada hoja de estilos de los componentes hijos, tenerla una sola vez en la del padre. ¿Es eso posible?

3
  • Desgraciadamente no somos adivinos por lo que si no muestros tus estilos o das una descripcion mas detallada de tu problema no podremos ayudarte
    – user22539
    Commented el 29 dic. 2017 a las 22:19
  • Posible duplicado de ¿Cómo agregar código CSS a mi página? Commented el 29 dic. 2017 a las 23:40
  • Lo he actualizado para explicarme mejor :).
    – Saulo
    Commented el 30 dic. 2017 a las 10:25

2 respuestas 2

2

Respondiendo a tu pregunta, puedes utilizar un mismo archivo de estilos para varios componentes. Esto que planteas se suele utilizar para definir paleta de colores, clases genéricas, animaciones y/o @keyframes.

Ejemplos:

Puedes hacerlo de diferentes formas, una seria la siguiente:

component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

Como se puede ver importas un .scss a tu componente, el cual tiene en su interior uno o varios, @import de otras hojas de estilo.

component.scss

@import '../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css';
@import '../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css';
@import '../assets/plugins/ionRangeSlider/css/ion.rangeSlider.css';
@import '../assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinNice.css';

Como puedes ver hago import de varias hojas de estilo diferentes, a modo de ejemplo, aquí tu deberéis importar tu hoja de estilo genérica para dicho componente.

Otra posible solución es la siguiente, importar varias hojas de css, directamente en el component.ts

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls:  ['style1.css', 'style2.css']
    })

Yo recomendaría menos esta ultima forma, ya que puede resultar más claro hacer @import dentro del .sccs y es lo que se suele recomendar para heredar paleta de colores, etc.

1
0

Sí, el mejor caso sería crear un fichero CSS dónde quieras y en vez de utilizar ninguno o el de cada componente para tus componentes hijos utilizar ese fichero simplemente apuntando a la ruta de este nuevo fichero en cada componente hijo. Recuerda, que un componente puede tener todos los ficheros CSS/SCSS qué quieras.

La herencia en Angular es posible, pero normalmente se utiliza la inyección de dependencias ya qué está más adaptado a la arquitectura de Angular.

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.