Giá trị ràng buộc với phong cách

Tôi đang cố gắng liên kết một thuộc tính màu từ lớp của mình (có được bằng liên kết thuộc tính) để đặt thuộc tính background-colorcủa tôi 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 + ";";
    }
}

Mẫu của tôi:

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

Việc sử dụng thành phần này:

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

Ràng buộc của tôi không hoạt động, nhưng cũng không ném ra bất kỳ ngoại lệ nào.

Nếu tôi đặt {{changeBackground()}}ở đâu đó trong mẫu, điều đó sẽ trả về chuỗi chính xác.

Vậy tại sao kiểu ràng buộc không hoạt động?

Ngoài ra, tôi sẽ xem những thay đổi đối với thuộc tính màu bên trong Circlelớp như thế nào? Thay thế cho cái gì

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

trong Angular 2?

Hóa ra ràng buộc của kiểu với một chuỗi không hoạt động. Giải pháp sẽ là ràng buộc nền của phong cách.

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

Kể từ bây giờ (tháng 1 năm 2017 / Angular> 2.0), bạn có thể sử dụng như sau:

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

và

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

Cách ngắn nhất có lẽ là như thế này:

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

Tôi đã quản lý để làm cho nó hoạt động với alpha28 như thế này:

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

và gọi nó như thế này <circle color='yellow'></circle>

• Trong app.component.html của bạn, hãy sử dụng:

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

• Trong app.ts khai báo biến kiểu chuỗi backcolor:string.

• Đặt biến this.backcolor="red".

Thử [attr.style]="changeBackground()"