Valor vinculante al estilo

Estoy tratando de vincular una propiedad de color de mi clase (adquirida por el enlace de atributos) para establecer el background-colorde mi div.

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 + ";";
    }
}

Mi plantilla:

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

El uso de este componente:

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

Mi enlace no funciona, pero tampoco arroja ninguna excepción.

Si pusiera {{changeBackground()}}en algún lugar de la plantilla, devolvería la cadena correcta.

Entonces, ¿por qué no funciona el enlace de estilo?

Además, ¿cómo vería los cambios en la propiedad de color dentro de la Circleclase? ¿Cuál es el reemplazo de

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

en Angular 2?

Resulta que la unión de estilo a una cuerda no funciona. La solución sería unir el fondo del estilo.

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

A partir de ahora (enero de 2017 / Angular> 2.0) puede usar lo siguiente:

changeBackground(): any {
    return { 'background-color': this.color };
}

y

<div class="circle" [ngStyle]="changeBackground()">
    <!-- <content></content> --> <!-- content is now deprecated -->
    <ng-content><ng-content> <!-- Use ng-content instead -->
</div>

El camino más corto probablemente sea así:

<div class="circle" [ngStyle]="{ 'background-color': color }">
    <!-- <content></content> --> <!-- content is now deprecated -->
    <ng-content><ng-content> <!-- Use ng-content instead -->
</div>

Me las arreglé para hacerlo funcionar con alpha28 así:

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

@Component({
  selector: 'circle', 
  properties: ['color: color'],
})
@View({
    template: `<style>
    .circle{
        width:50px;
        height: 50px;
        border-radius: 25px;
    }
</style>
<div class="circle" [style.background-color]="changeBackground()">
    <content></content>
</div>
`
})
export class Circle {
    color;

    constructor(){
    }

    changeBackground(): string {
        return this.color;
    }
}

y lo llamo así <circle color='yellow'></circle>

• En su app.component.html use:

    [ngStyle]="{'background-color':backcolor}"
  

• En app.ts declarar variable de tipo de cadena backcolor:string.

• Establezca la variable this.backcolor="red".

Tratar [attr.style]="changeBackground()"