Angular 2.0的风格绑定值
我试图从我的类（通过属性绑定获取）绑定一个颜色属性来设置我的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（）}}放在模板的某个位置，那会返回正确的string。 那么为什么风格绑定不起作用？
也来想一想，我将如何看Circle类的颜色属性的变化？ 什么是替代
$scope.$watch("color", function(a,b,){});
在angular2.0？
原来样式绑定到一个string不起作用。 解决办法是绑定样式的背景。
<div class="circle" [style.background]="color">
截至目前（2017年1月/ 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>
试试[attr.style]="changeBackground()"
