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

Question

我有一个 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 || ''));
}

如果我能解决从选择器中获取更改的值，然后触发传递该检索到的值的函数，我可能可以弄清楚其余部分。

Answer 1

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

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

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