92

我正在尝试从我的类中绑定一个颜色属性（通过属性绑定获得）来设置background-color我的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()}}在模板中放置某个位置，那确实会返回正确的字符串。

那么为什么样式绑定不起作用？

另外，我如何观察Circle类内颜色属性的变化？什么是替代品

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

在 Angular 2 中？

4

6 回答 6

120

原来将样式绑定到字符串不起作用。解决方案是绑定样式的背景。

 <div class="circle" [style.background]="color">
于 2015-04-08T14:50:14.167 回答
44

截至目前（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>
于 2017-01-11T01:01:19.883 回答
23

我设法使它与 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>

于 2015-07-02T08:03:57.587 回答
5

  • 在您的app.component.html 中使用：

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

  • 在app.ts 中声明字符串类型的变量backcolor:string。

  • 设置变量this.backcolor="red"。

于 2019-02-22T06:41:29.477 回答
2

尝试[attr.style]="changeBackground()"

于 2016-03-02T18:30:15.170 回答
2

这在 Angular 11 和可能更早的版本中运行良好：

<div [style.backgroundColor]="myBgColor" [style.color]="myColor">Jesus loves you</div>

在控制器 .ts 文件中：

myBgColor = '#1A1A1A'
myColor = '#FFFFFF'
于 2021-05-04T22:27:22.667 回答