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>

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

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

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

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

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

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

如果我可以解决在更改时从选择器获取值，然后触发传递该检索值的函数，我可以找出其余部分。

Answer 1

要从选择器中获取所选值，请使用ngModelChange事件和ngModel指令。

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

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

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

1 个答案: