Значення, що пов’язує зі стилем

Я намагаюся прив'язати властивість кольору з мого класу (придбаного за допомогою прив'язки атрибутів), щоб встановити параметр background-colormy 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 + ";";
    }
}

Мій шаблон:

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

Моє прив'язка не працює, але також не створює жодних винятків.

Якщо я ставлю {{changeBackground()}}десь у шаблоні, це повертає правильний рядок.

То чому прив'язка стилів не працює?

Крім того, як би я спостерігав за змінами властивості color усередині Circleкласу? Для чого потрібна заміна

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

в Кутовий 2?

Виявляється, прив'язка стилю до рядка не працює. Рішенням було б пов’язати тло стилю.

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

На сьогодні (січень 2017 р. / Angular> 2.0) ти можеш використовувати наступне:

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

і

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

Найкоротший шлях, мабуть, такий:

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

Мені вдалося змусити його працювати з alpha28 так:

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

і назвав це так <circle color='yellow'></circle>

• У вашому app.component.html використовуйте:

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

• У app.ts оголосити змінну типу рядка backcolor:string.

• Встановіть змінну this.backcolor="red".

Спробуйте [attr.style]="changeBackground()"