在Angular 5中使用HTML5颜色选择器设置css变量？答案

【问题标题】：Set css variable with HTML5 color picker in Angular 5?在Angular 5中使用HTML5颜色选择器设置css变量？
【发布时间】：2018-09-16 18:37:25
【问题描述】：

我有一个 Angular 5 应用程序，其中的项目在 CSS 中使用 CSS 变量设置样式，如

--color-links: #0000ff;
a { color: var(--color-links); }

所以，我试图连接一个 HTML5 颜色选择器以允许动态更改此变量。

我看到this article 展示了this pen，作者正在使用一些简单的JS 来做我想做的事情，但使用document.addEventListener。我试图想出一个纯粹的 Angular/HTML5 方法。

所以，我创建了一个选择器：

    <div class="form-group">
        <label for="color-picker-link">Link color</label>
        <input type="color"
               id="color-picker-link"
               (change)="setColor()"
               [(value)]="linkColor">
      </div>

在我的组件中，我创建了变量linkColor 并将其设置为#0000ff。该部分有效，选择器默认为蓝色。

public linkColor = '#0000ff';
setColor() {
  console.log('value', this.linkColor);
}

但是，即使选择器明显更改，变量也始终记录为原始 30000ff。

所以，我需要做的是获取选择器更改为的值。不知道为什么它不起作用。

此外，我在上面链接到的示例 Codepen 使用此函数来设置检索到的变量值，尽管我认为它不适用于 Angular 应用程序：

function setThemeVar(name, value, unit) {
  var rootStyles = document.styleSheets[0].cssRules[0].style;
  rootStyles.setProperty('--theme-' + name, value + (unit || ''));
}

如果我可以解决在更改时从选择器中获取值，然后触发一个传递检索到的值的函数，我可能会找出其余的。

【问题讨论】：

标签： javascript html css angular css-variables

【解决方案1】：

要从选择器中获取选定的值，请使用带有 ngModel 指令的 ngModelChange 事件。

<input type="color"
               id="color-picker-link"
               (ngModelChange)="setColor($event)"
               [ngModel]="linkColor">

setColor(newColor) {
  console.log('value', newColor);
  this.linkColor = newColor;
}

【讨论】：