javascript - multiple - Angular 2.0 y estilo ng

ng style in angularjs

Question

Estoy creando un componente Angular 2.0 y quiero controlar su estilo dinámicamente (usando ng-style ). Después de una vista rápida en los documentos de Angular 2, probé esto:

<div class="theme-preview" ng-style="{''font-size'': fontSize}">
{{fontSize}}
</div>

Y vio que el tamaño realmente se imprime dentro del div pero no afectó el estilo. fontSize es uno de los enlaces de propiedades del componente, lo que significa que el componente lo obtiene de su padre de esta manera:

<my-component [font-size]="size" />

Mientras que dentro del componente tengo:

@Component({
selector: ''XXX'',
properties: [''fontSize'']
})

¿Me estoy perdiendo de algo?

Answer 1

Actualizar

La gente todavía llega a esta respuesta, por lo que he actualizado el plnkr a beta.1. Dos cosas han cambiado hasta ahora.

• NgStyle ya no es necesario que se agregue explícitamente en la propiedad de directivas. Es parte de las directivas comunes que se agregan de forma predeterminada.
• La sintaxis ha cambiado, ahora debe ser camel case.

Ejemplo

@Component({
selector : ''my-cmp'',
template : `
<div class="theme-preview" [ngStyle]="{''font-size'': fontSize+''px''}">
{{fontSize}}
</div>`
})
class MyCmp {
@Input(''font-size'') fontSize;
}
@Component({
selector: ''my-app'',
directives: [MyCmp],
template: `
<my-cmp [font-size]="100"></my-cmp>
`
})

Ver este plnkr ( Actualizado a beta.1 )

Answer 2

Algo como esto está funcionando en la última versión de angular en este momento 4, la sintaxis realmente cambió, observe el [ngStyle]

.color-box {
width: 10px;
height: 10px;
display: inline-block;
}
<div class="color-box" [ngStyle]="{''background-color'': your.model.object.color_code}"></div>

Answer 3

Para un estilo específico, también puedes usar esto:

<div class="theme-preview" [style.font-size]="fontSize+''px''">