Angular 4：从json中的自定义css在应用程序中应用样式

问题很简单：包括JSON中指定的样式属性（以编程方式）

json字段是：

custom_css: "h1 { color:white; } #body-container.takeover .primary-color-bg{ background-color:#0092db; }"

我可以想到一个想法，组件的“样式”属性的自定义变量。不起作用

import { Component } from '@angular/core';
import { Service } from './services/json.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  styles: this.customStyles   // THIS
})
export class AppComponent {
  customStyles: Array<string> = [];

  constructor(private service: Service) {
    this.service.getJson().subscribe( (data: any) => {
      this.customStyles = data.custom_css;
    });
  }

}

从'@angular/core'导入{Component}；
从'./services/json.Service'导入{Service}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
样式：this.customStyles//this
})
导出类AppComponent{
customStyles:Array=[]；
构造函数（专用服务：服务）{
this.service.getJson（）.subscribe（（数据：any）=>{
this.customStyles=data.custom\u css；
});
}
}

---

您知道如何在Angular 4中实现这一点吗？

如果您可以重写json：

custom_css:{ h1_color: "color:white",  bodyContainer_background:" color:#0092db"}

及

从'@angular/core'导入{Component}；
从'./services/json.Service'导入{Service}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
{
this.customStyles=data.custom\u css；
});
}
}

在您的html中：

放置

[ngStyle]=“customStyles.h1\u color”

---

您要在其中添加样式。

我看到许多关于“如何动态加载样式”的问题。原因是什么？为什么不为每个组件编写样式呢？我所能说的就是要求各不相同。我当然可以这么做，但事实并非如此。在我的例子中，json包含一些频道的信息，这些频道由用户个性化。您需要检索有关他们如何在频道中个性化其工作区的信息。说来话长，但你明白要点了。谢谢你的回答，我确实尝试了一些受你启发的想法。我没有成功。我将对此进行进一步研究，并发布我的结果。

import { Component } from '@angular/core';
import { Service } from './services/json.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
       <--------- Nothing here
})
export class AppComponent {
  customStyles: Array<string> = [];

  constructor(private service: Service) {
    this.service.getJson().subscribe( (data: any) => {
      this.customStyles = data.custom_css;
    });
  }

}