Wert für Stil binden

Ich versuche, eine Farbeigenschaft aus meiner Klasse (die durch Attributbindung erworben wurde) zu binden, um die background-colorvon my festzulegen 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 + ";";
    }
}

Meine Vorlage:

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

Die Verwendung dieser Komponente:

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

Meine Bindung funktioniert nicht, wirft aber auch keine Ausnahmen.

Wenn ich {{changeBackground()}}irgendwo in die Vorlage einfügen würde, würde dies die richtige Zeichenfolge zurückgeben.

Warum funktioniert die Stilbindung nicht?

Wie würde ich auch die Änderungen an der Farbeigenschaft innerhalb der CircleKlasse beobachten? Wofür ist der Ersatz?

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

in Winkel 2?

Es stellt sich heraus, dass die Bindung des Stils an eine Zeichenfolge nicht funktioniert. Die Lösung wäre, den Hintergrund des Stils zu binden.

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

Ab sofort (Jan 2017 / Angular> 2.0) können Sie Folgendes verwenden:

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

und

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

Der kürzeste Weg ist wahrscheinlich so:

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

Ich habe es geschafft, dass es mit alpha28 so funktioniert:

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

und nannte es so <circle color='yellow'></circle>

• Verwenden Sie in Ihrer app.component.html :

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

• In app.ts deklarieren Sie eine Variable vom Typ String backcolor:string.

• Stellen Sie die Variable ein this.backcolor="red".

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