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

Question

如果我有这样的模板：

<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' 
         }
      }
   };

如何将theme.title.styles中的CSS应用于呈现的HTML？

我的一个想法是动态定义组件元数据中的styles，但我不知道这是否可行。

Answer 1

我认为你可以使用ngStyle

试试这个希望它会起作用：）

<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;
}

Answer 2

由于您使用HTML，因此无法使用ngStyle。

从那里，你有两个解决方案，但鉴于你的主题对象结构，这只剩下一个：

public html = `<div class="title" id="YouNeedACustomId">Title</div><p>etc. etc.</p>`;
let el = document.getElementById('YouNeedACustomId');
for (let prop in theme.title.styles) { el.style[prop] = theme.title.styles[prop]; }