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

Question

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

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

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

我看到 this article which showcases 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;
}

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

Set css variable with HTML5 color picker in Angular 5?

html

javascript

css

css-variables

angular