将值绑定到样式

Posted 2023-02-22

【中文标题】将值绑定到样式

【英文标题】：Binding value to style

【发布时间】：2015-06-13 11:02:10

【问题描述】：

我正在尝试从我的类中绑定一个颜色属性（通过属性绑定获得）以设置我的div 的background-color。

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

【参考方案1】：

这在 Angular 11 甚至更早版本中都能正常工作：

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

在控制器 .ts 文件中：

myBgColor = '#1A1A1A'
myColor = '#FFFFFF'

【参考方案2】：

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

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

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

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

【参考方案3】：

我设法让它像这样与 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>

【参考方案4】：

截至目前（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>

【参考方案5】：

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

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

【讨论】：

你错过了截至alligator.io/angular/style-binding-ngstyle-angular<div class="circle" [style.background]="'color'">的报价

为了清楚起见：color 在这种情况下是您组件上的一个属性，其中包含您要使用的值。如果您使用引号 是 您要使用的值。 color 不是有效的 CSS 颜色。它需要类似于[style.background] = "'#f3f3f3'"。

【参考方案6】：

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