0

我正在尝试找到将 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 设置模块上设置的这些自定义 css 值。

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

非常感谢任何帮助，谢谢。

4

1 回答 1

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]};"`
于 2021-06-10T02:52:18.037 回答