如何将 style-tag 添加到 angular 5 个应用程序 body

Question

我们有一项服务可以聚合大量信息，我想在 angular 5 应用程序中显示这些信息。显示这个的模型在不断变化，并且在很多应用程序中共享，所以我想动态导入它。

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

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

this.css

在我的 html-code 中，我正在尝试做这样的事情：

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

遗憾的是，无论我做什么，style-tags 都被删除了。

为什么要删除它们？我该怎么做才能完成这项工作？还有其他方法吗，比如将样式交给 angular 以将它们添加到 header?

Answer 1

您可以通过清理 <style> 添加到组件 HTML。

Angular 提供 DomSanitizer 服务，该服务位于 @angular/platform-browser 包

内

你应该做如下，

HTML 代码应为

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

Typescript 方法应为

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 函数创建了一个新的样式表并向其中添加了我的规则。

如何将 style-tag 添加到 angular 5 个应用程序 body

how to add a style-tag to angular 5 app body

css

angular

angular5