在Angular 4中定义运行时的CSS类

如果我有这样一个模板：

<div [innerHTML]="html"></div>

在组件中：

    public html = "<div class='title'>Title</div><p>etc. etc.</p>";
    public theme = {
       title: { 
          styles: {
             letterSpacing: '1px',
             fontWeight: 'bold', 
             color: 'gray' 
         }
      }
   };

public html=“Title等等
”；
公共主题={
标题：{
风格：{
字母间距：“1px”，
fontWeight:'粗体'，
颜色：“灰色”
}
}
};

如何将

theme.title.styles

中的CSS应用于呈现的HTML

我的一个想法是在组件元数据中动态定义

样式，但我不知道这是否可行

试试这个，希望它能起作用：）

因为您使用HTML，所以不能使用ngStyle

从这里开始，您有两个解决方案，但考虑到主题对象结构，这只剩下一个：

public html=`Title等
`；
设el=document.getElementById（'YouNeedACustomId'）；
for（让prop进入theme.title.styles）{el.style[prop]=theme.title.styles[prop]；}

<div [ngStyle] ="getStyle()" [innerHTML]="html"></div>

getStyle(){
  let styleObject =  theme.title.styles;// or your style object howe so ever you want to define
  return styleObject;
}