Angular js应用具有ng风格的渐变答案

【问题标题】：Angular js applying Gradients with ng styleAngular js应用具有ng风格的渐变
【发布时间】：2020-05-06 03:14:45
【问题描述】：

无法使用 Angular js ng-style 指令设置渐变.. 可以使用以下设置正常颜色

<span ng-style="{'background-color': slidercolor}">works</span>

但是对于渐变它不起作用

下面是同样的 jsfiddle。

<span ng-style="{'background-color':'-webkit-gradient(linear, left top, right top, color-    stop(0%,'slidercolor'), color-stop(100%,rgba(125,185,232,0)))'}">didnt work</span>

http://jsfiddle.net/sT8ar/1/

另外请告诉我哪些应该用引号括起来，哪些不应该..

【问题讨论】：

你用的是什么浏览器？
这个应该可以在 ie10 上运行：jsfiddle.net/sT8ar/2
问题是大多数浏览器需要不同的代码来显示渐变，您所拥有的仅适用于 webkit 浏览器，例如 chrome 和 safari。

标签： javascript html css angularjs

【解决方案1】：

这里有两个问题：

-webkit-gradient() 产生<image>，而不是<color>，它应该被用作background-image。
在 Angular 表达式中，连接是通过 +（加号）完成的。

所以正确的语法是 (demo):

<span ng-style="{'background-image':'-webkit-gradient(linear, left top, right top,   color-stop(0%,'+ slidercolor+'), color-stop(100%,rgba(125,185,232,0)))'}">
  Works now too.
</span>

【讨论】：

【解决方案2】：

希望对你有帮助。

控制器

private setStyles() {
  const rgbaGradientStart = hexToRgba(this.hexGradientStart, 1);
  const rgbaGradientEnd = hexToRgba(this.hexGradientEnd, 0.1);
  const gradientParams = `left, ${rgbaGradientStart} 0%, ${rgbaGradientEnd} 50%`;

  this.gradientStyles = {
    'background-image': `-webkit-linear-gradient(${gradientParams})`,
    // 'background-image': `-moz-linear-gradient(${gradientParams})`,
    // 'background-image': `-o-linear-gradient(${gradientParams})`,
    // 'background-image': `-ms-linear-gradient(${gradientParams})`,
    // 'background-image': `linear-gradient(${gradientParams})`,
  }
}

模板

<div
  class="super-gradient"
  [ngStyle]="gradientStyles"
></div>

P.S.：您可能也对此感兴趣
https://github.com/angular/angular/issues/11362#issuecomment-244816438

【讨论】：