角2.0​​和NG-风格 [英] Angular 2.0 and ng-style

问题描述

我建立一个角2.0组件，我想控制它的动态（使用 NG-风格）的样式。对角2的文档快速查看后，我想这样的：

I am building an Angular 2.0 component and I want to control it's style dynamically (using ng-style). After a quick view on Angular 2's docs i tried this:

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

和看到的大小实际上是印在DIV中却没有受到影响的样式。 fontSize的是组件的属性绑定中的一个，这意味着该组件从其父得到这样的：

And saw that the size is actually printed inside the div but did not affected the style. fontSize is one of component's property bindings', meaning the component gets it from its parent like this:

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

虽然组件内我有：

While inside the component I have:

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

我失去了一些东西在这里？

Am I missing something here?

推荐答案

人们仍然达到这个答案，所以我已经更新了plnkr到beta.1。两件事情改变了迄今

Update

People still reach this answer, so I've updated the plnkr to beta.1. Two things have changed so far

• NgStyle是不再需要在指示属性显式添加。这是由默认添加常用指令的一部分。


• 的语法已经改变，现在它必须是骆驼。

示例

@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>
  `
})

请参阅此 plnkr （更新至beta.1 ）

这篇关于角2.0​​和NG-风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！