注入来自服务器的CSS变量名(Angular 12)

Question

我正在努力寻找将css变量注入angular应用程序的最佳解决方案(目前使用Angular 12)。

这是我使用的代码：

 private injectStyles(data: any) {
    const styles = this.document.createElement('STYLE') as HTMLStyleElement;
    styles.id = 'dynamic-css';

    this.test = `:root {      
      --main-bg-color: black;
    }`;
    
    styles.innerHTML = this.test;
    this.renderer.appendChild(this.document.head, styles);
}

这段代码是在app.component.ts文件上执行的，效果很好，我可以在整个应用程序中使用这个css变量。我现在尝试实现的是使用来自服务器的数据扩展this.test对象，并应用之前在Visual settings模块中设置的这些自定义CSS值。

Css变量不能有"“引号。"--button-color": "#a86c6c" (这是我从服务器得到的)，我想在this.test对象上注入这个不带引号的属性，但我不能这样做。有什么想法吗？

非常感谢您的帮助，谢谢。

Answer 1

Object.keys是你的朋友

 let dataString = '';
 Object.keys(data).forEach(key => {
    dataString += `${key}: ${data[key]};`
 });
 this.test = `:root {      
  --main-bg-color: black;
  ${dataString}
}`;

如果需要，您可能需要将引号添加到值中，如下所示

`dataString += `${key}: "${data[key]};"`