angular - 将值绑定(bind)到样式

Question

我正在尝试从我的类中绑定(bind)一个颜色属性(通过属性绑定(bind)获取)来设置我的 div 的 background-color。

import {Component, Template} from 'angular2/angular2';

@Component({
  selector: 'circle',
  bind:{
    "color":"color"
  }
})
@Template({
  url: System.baseURL + "/components/circle/template.html",
})
export class Circle {
    constructor(){

    }

    changeBackground():string{
        return "background-color:" + this.color + ";";
    }
}

我的模板:

<style>
    .circle{
        width:50px;
        height: 50px;
        background-color: lightgreen;
        border-radius: 25px;
    }
</style>
<div class="circle" [style]="changeBackground()">
    <content></content>
</div>

该组件的用法:

<circle color="teal"></circle>

我的绑定(bind)不起作用，但也没有抛出任何异常。

如果我将 {{changeBackground()}} 放在模板中的某处，它会返回正确的字符串。

那么为什么样式绑定(bind)不起作用？

此外，我如何观察 Circle 类中颜色属性的变化？用什么代替

$scope.$watch("color", function(a,b,){});

在 Angular 2 中？

Answer 1

事实证明样式与字符串的绑定(bind)不起作用。解决方案是绑定(bind)样式的背景。

 <div class="circle" [style.background]="color">