角度：使用颜色选择器输入更改颜色CSS变量

Question

我正在使用代码in this answer创建HTML5颜色输入控件，以更改CSS可变颜色。

选择器是

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

TS是

  public buttonColor;

  ngOnInit() {
    let styles = getComputedStyle(document.documentElement);
    // set the color picker to match the value in the default css
    this.buttonColor = String(styles.getPropertyValue('--blue')).trim();
  }

  setColor(newColor) {
    document.documentElement.style.setProperty('--color-button-primary-background', newColor);
  }

但是我想有多个颜色选择器，每个颜色选择器都更改一个不同的css变量。我不想为每个函数创建一个函数，但无法弄清楚如何通过哪个变量来更改HTML。有什么建议吗？

编辑

我可能已经解决了，不确定这是否是最好的方法：

(ngModelChange)="setColor($event,'--color-button-primary-background')"

然后

  setColor(e, which) {
    document.documentElement.style.setProperty(which, e);
  }

我承认，我根本没有得到$event，因为它为什么返回ngModel值。