Question

我们有一个服务可以汇总我想在5角应用中显示的大量信息。显示此模型的模型不断变化，并且共享许多应用程序，因此我想动态导入它。

我的想法是在服务中查询该模型，将其交给需要它的组件，然后将它们打印出来作为css规则。

组件中css规则的生成工作正常，我得到一个变量，其中包含包含所有规则的字符串：

this.css

在我的html代码中我试图做这样的事情：

<style>
  {{css}}
</style>

可悲的是，无论我做什么，都会删除样式标签。

他们为什么被删除？我能做些什么来完成这项工作？还有另一种方法，比如将样式处理为角度以将它们添加到标题中吗？

Answer 1

您可以通过清理<style>。

来添加到组件HTML

Angular提供@angular/platform-browser包

内的DomSanitizer服务

你应该这样做，

HTML代码应为

 <div [innerHTML]="getStyles()"></div>

打字稿方法应该是

getStyles(){
    return this.domSanitizer.bypassSecurityTrustHtml(this.styles);
}

注意：在我的代码中

的值

styles = `<style>
                body {background-color: red;}
                h1   {color: blue;}
                p    {color: red;}
          </style>`

<强> LIVE DEMO

Answer 2

我使用原生js函数创建了一个新的样式表，并将我的规则添加到其中。

如何将样式标签添加到angular 5 app主体

2 个答案: