3

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/

また、引用符で囲む必要があるものと、そうでないものを教えてください..

4

2 に答える 2

1

これがお役に立てば幸いです。

コントローラ

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>

PS: このhttps://github.com/angular/angular/issues/11362#issuecomment-244816438にも興味があるかもしれません

于 2020-05-05T19:14:45.593 に答える