如何渲染内部 Css - Angular

Question

我有一个对象“Content”包含两个属性：

Content:{
html:string;
css:string
}

我需要根据这个对象渲染一个 div，对于 html 我可以使用：

<div [innnerHtml]="Content.html"></div>

但我无法渲染对象的 css。内容示例：

Content:{
html:"<p>test rendering the object</p> <br> <div class="div1"></div>",
css:"p{color:red} .div1{background-color:black}"
}

Answer 1

您可以使用 ngStyle 标记指令。

例如：

<div [ngStyle]='style.css' [innnerHtml]="Content.html"></div>

Answer 2

我的解决方案是以编程方式附加样式内容，如下所示：

ngOnInit() {
  const css = 'a {color: pink;}';
  const head = document.getElementsByTagName('div')[0];
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  head.appendChild(style);
}

如何渲染内部 Css - Angular

How to render inner Css - Angular

javascript

innerhtml

typescript

angular