Question

静态值可以完美运行

 <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div>

在我的ts。

 this.blueColor = '#0000FF';
 this.orangColor = '#FFA500';

当我在html中绑定此变量时，出现模板错误。

<div style="background: linear-gradient(to right, {{blueColor}} 0%, {{blueColor}} 50%, {{orangColor}} 50%, {{orangColor}} 100%);"></div>

如何在其中绑定变量？

Answer 1

您也可以在ts中使用变量：

blueColor = '#0000FF'; orangColor = '#FFA500'; background="linear-gradient(to right,"+ this.blueColor + " 50%," + this.orangColor + " 0)";

HTML：

<div [style.background]="background"></div>

See code
使用HTML进行绑定

<div [style.background]='"linear-gradient(to right,"+ this.blueColor + " 50%," + this.orangColor + " 0)"'></div>

See code

Answer 2

您可能会使用3种方式。

首先是使用[ngClass]，然后在css和.ts文件中定义它们，以了解您希望的类是什么。示例：

.html

<div [ngClass]="class">
    <hello name="{{ name }}"></hello>
</div>

.ts

class = 'option';

.css

.option{
 background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);
}

第二种是使用pipe，您可以参考this以获得更多详细信息。

第三种方法是在.ts中使用预定义的样式，您可以在以后修改定义颜色的变量。

.html

<div [style.background]="background">test</div>

.ts

  blueColor = '#0000FF';
  orangColor = '#FFA500';
  background= 'linear-gradient(to right, '+ this.blueColor+' 0%, '+ this.blueColor+' 50%, '+ this.orangColor+' 50%, '+ this.orangColor+' 100%)';

Stackblitz for Demo

Answer 3

我找到了答案。它对我有用。

[style.background]="'linear-gradient(to right, ' +  blueColor +'  0%  ,  ' +  blueColor +' 50% , ' +  orangColor +'  50%  ,  ' +  orangColor +' 100% )'"

Answer 4

您还可以使用angular的renderer2设置一个css变量，然后在您的css中使用var（--some-var）使用它。例如在您的CSS中：

background: linear-gradient(to right,  var(--color-1) 0%,  var(--color-1) 50%,  var(--color-2) 50%,  var(--color-2) 100%);

以及您的.ts中的ngOnInit中

：

  this.blueColor = '#0000FF';
  this.orangColor = '#FFA500';

  this.renderer.setAttribute(
    this.el.nativeElement, "style", `--color-1: ${this.blueColor}; --color-2: ${this.orangColor}`
  );

这是在给css变量分配自定义颜色。您可以在此处查看有效的演示：

https://stackblitz.com/edit/angular-stackoverflow-answers

Angular2-线性渐变绑定背景色

4 个答案: