如何在运行时在 Angular 中添加内部样式表（非内联）？

Question

在我的 Angular 4 应用程序中，我有一个页面，其内容存储在我服务器上某个 URL 的 JSON（部分是 CSS 定义，部分是 HTML 标记）中。所以我制作了一个 shell 组件来托管 Angular 中的内容。

对于 HTML，我必须在模板中使用 <div [innerHTML]="my_html"></div>，在脚本中使用 this.my_html = this.sanitizer.bypassSecurityTrustHtml(my_html);。

对于 CSS，我尝试过

1. <style [innerHTML]="my_css"></style>
2. <style>{{my_css}}</style>

具有不同的消毒组合，但 Angular 总是妥协<style> 元素。特别是：

1. 在这种情况下，它会从模板中删除元素，但不会将其附加到头部。元素就消失了。
2. 在这种情况下，它会从模板中删除元素并将其附加到头部，如<style>{%BLOCK%}</style>。换句话说，该元素是无用的。

Answer 1

最后，我不得不在 ngOnInit() 处理程序中使用 jQuery $('<style>').text(my_css).appendTo('head');，它工作得很好，但感觉不... Angular。