Así que tengo este componente llamado InputEdit (básicamente una Label que se puede editar al hacer clic en él... bastante simple) y este componente tiene su propio estilo DOM CSS sombreado. Pero, por supuesto, cada componente de alojamiento querrá establecer su propio tamaño y color de fuente para el componente de entrada...
Entonces, ¿cuál sería la mejor manera? ¿Puede simplemente pasar una clase de estilo y aplicar todo el CSS al componente? ¿O sería mejor pasar cada valor manualmente como en:
<InputEdit [color]="'red'"/>Lo que parecería mucho trabajo, pero nuevamente, dado que estamos usando la sombra o el DOM emulado, no podemos simplemente controlar el CSS externamente.
También soy consciente de que puede empalmar la sombra y apuntar a elementos directos a través de:
/* styles.css */ UserInfo /deep/ InputEdit label { color: red; font-size: 1.1em; }Lo que básicamente le permitirá ingresar a un componente personalizado llamado UserInfo / deep (cualquier nivel) / componente personalizado InputEdit y etiqueta de destino con color rojo ...
Pero nuevamente, me pregunto cuál es el mejor enfoque específicamente para ng2, como pasar una configuración de clase a una directiva, ¿quizás?
Simplemente usaría una propiedad de entrada de styles en InputEdit y pasaría un objeto con los estilos deseados:
<InputEdit [styles]="stylesObj"> // in host component's template stylesObj = {font-size: '1.1em', color: 'red'}; // in host component class <input [ngStyle]="stylesObj" ...> // in InputEdit component's templateSi tiene varios elementos DOM que desea diseñar, pase un objeto más complejo:
<InputEdit [styles]="stylesObj"> stylesObj = { input: {font-size: '1.1em', color: 'red'} label: { ... } }; <label [ngStyle]="styles.label" ...> <input [ngStyle]="styles.input" ...>La respuesta de Mark Rajcok es buena para un grupo de estilos, pero si solo va a permitir que se cambie el tamaño de fuente y el color, es posible que desee utilizar un enfoque más directo como el que comenzó (en este ejemplo, también aplicar solo píxeles en lugar de una cadena más flexible para fines de demostración):
Para propiedades de estilo individuales :
Componente:
<InputEdit [color]="'red'" [fontSize]="16">
componente.ts:
Input() color: string = 'black';
Input() fontSize: number = 18;
componente.plantilla:
<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">
Si permite un grupo de estilos :
Componente:
<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}"> NOTA: Asegúrese de que las propiedades CSS estén en mayúsculas o minúsculas si hay más de una palabra.
componente.ts:
@Input() styles: any = {};
componente.plantilla:
<input type="text" [ngStyle]="styles">
actualizar
::slotted ahora es compatible con todos los navegadores nuevos y se puede usar con `ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::ranurado
original
/deep/ , ::shadow y >>> están en desuso. ::ng-deep es la mejor opción hasta que todos los navegadores admitan correctamente la encapsulación de estilo y se pueda eliminar ViewEncapsulation.Emulated .
La obsolescencia es solo para la implementación nativa en Chrome (otros navegadores nunca la implementaron), pero Angular tiene su propia emulación de estos combinadores de CSS en ViewEncapsulation.Emulated (predeterminado)
/deep/ , ::shadow y >>>::ng-deep por lo tanto se pueden usar muy bien en Angular2.
Para más que clases simples o configuraciones de propiedades de estilo, use ngStyle Angular 2.0 y ng-style