如何在打字稿中调用线性梯度函数？

Question

我正在尝试向打字稿中的样式变量添加线性渐变。像这样

在component.html

中

<div class="colored" [ngStyle]="colorTest3">

在component.ts

中

colorTest3 = {
   background-image: linear-gradient(red, yellow)
}

但是它一直给我一个错误。帮助吗？

Answer 1

如果对象属性名称中没有用引号引起来，则不能在其属性名称中使用破折号（-）。另外，该值也必须是字符串。

colorTest3 = {
  "background-image": "linear-gradient(red, yellow);"
}

Answer 2

对于 <div> 标签，您必须添加高度样式以显示线性渐变样式的效果。并确保你结束你的 div 标签。 (</div>)

在 component.html

<div class="colored" [ngStyle]="colorTest3">
</div>

在 component.ts 中

colorTest3 = {
    'background-image': 'linear-gradient(red, yellow)',
    'height': '200px'
   }

Answer 3

如果您仅需要绑定一种样式，则可以使用[style.backgroundImage]，还应该在linear-gradient(red, yellow)内添加''，例如"'linear-gradient(red, yellow)'"

尝试这样：

<div class="colored" [style.backgroundImage]="'linear-gradient(red, yellow)'">

要具有动态色彩，请尝试这样：

[style.backgroundImage]="'linear-gradient(' + color1 + ', ' + color2 + ')'"

TS：

color1 = 'red'
color2 = 'blue'

Answer 4

尝试

colorTest3 = {
  'background-image': 'linear-gradient(red, yellow)'
 }

demo

Answer 5

对于 html：

<div [ngStyle]="background"></div>

对于 ts：

background: any = "linear-gradient('color1', 'color2')"