angular - page - La mejor manera de pasar el estilo a un componente

ng-content angular 6

Question

Así que tengo este componente llamado InputEdit (básicamente una Label que se puede editar cuando haces clic en él ... lo suficientemente simple) y este componente tiene su propio estilo de DOM CSS sombreado. Pero, por supuesto, cada componente de alojamiento querrá establecer su propio tamaño de fuente y color para el componente de entrada ...

Entonces, ¿cuál sería la mejor manera? ¿Puedes 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, ya que estamos usando la sombra o DOM emulado, no podemos simplemente controlar el CSS externamente.

También soy consciente de que puede empalmar la sombra y dirigir los 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 denominado 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, tal vez.

Answer 1

Otra opción es usar variables CSS. En este caso, para personalizar el color y el tamaño de fuente de la etiqueta del componente secundario, puede establecer dos variables en el CSS del componente principal y utilizarlas en el CSS del niño.

userInfo.component.css

InputEdit {
  --label-color: red;
  --label-font-size: 1.1em;
}

inputEdit.component.css

label {
  color: var(--label-color, #000);
  font-size: var(--label-font-size, 1em);
}

Por supuesto, esto significa que tiene que definir cada propiedad que desea que tenga un estilo, pero si solo necesita establecer algunos estilos en el niño, funciona bien.

Answer 2

Si desea dejarlo en el componente para definir el css real, puede probar uno de los siguientes:

Agregue una propiedad en su componente para cada configuración de estilo ''lógico'', por ejemplo headerSize .

@Input(''headerSize'') headerSize: (''small'' | ''large'');

Luego, su componente puede verificar su valor en una de las pocas formas de estilo:

1. Modifique el propio HTML mostrando u ocultando elementos secundarios.

   <h1 *ngIf="headerSize == ''large''">{{ title }}</h1>
   <h2 *ngIf="headerSize == ''small''">{{ title }}</h2>

2. Establece una clase personalizada dinámicamente dentro del componente en algún lugar, y dale un estilo:

   <div [ngClass]="''header-'' + headerSize">
   
   .header-small { h1 { font-size: 20px; } }
   .header-large { h1 { font-size: 30px; } }

3. Establecer una clase personalizada dinámicamente en el nivel de clase. Esto es lo mismo que # 2 y no requiere un elemento de envoltura. Sin embargo, es menos que trivial habilitar y deshabilitar estas clases.

   @HostBinding(''class.header-small'') _header_small;
   @HostBinding(''class.header-large'') _header_large;

También tenga en cuenta que si está utilizando ng-content los estilos aplicados son los estilos definidos en el componente contenedor y no el componente que realmente reemplaza el contenido.

Answer 3

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 template

Si 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" ...>

Answer 4

La respuesta de Mark Rajcok es buena para un grupo de estilos, pero si solo va a permitir que se cambien el tamaño de la fuente y el color, es posible que desee utilizar un enfoque más directo como el que comenzó (en este ejemplo, también es obligatorio solo píxeles en lugar de una cadena más flexible para propósitos de demostración):

PARA PROPIEDADES DE ESTILO INDIVIDUAL:

Componente:
<InputEdit [color]="''red''" [fontSize]="16">

componente.ts:
Input() color: string = ''black'';
Input() fontSize: number = 18;

component.template:
<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">

SI SE PERMITE UN GRUPO DE ESTILOS:

Componente:
<InputEdit [styles]="{backgroundColor: ''blue'', ''font-size'': ''16px''}"> NOTA: Asegúrese de que las propiedades CSS estén en camel o en una cadena si hay más de una palabra.

componente.ts:
@Input() styles: any = {};

component.template:
<input type="text" [ngStyle]="styles">

Answer 5

actualizar

::slotted ahora es compatible con todos los nuevos navegadores y se puede usar con `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

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 estilos y se pueda eliminar ViewEncapsulation.Emulated .

La desaprobación es solo para la implementación nativa en Chrome (otros navegadores nunca lo 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 puede usar bien en Angular2.

Para más que clases simples o configuraciones de propiedades de estilo, use ngStyle Angular 2.0 y ng-style