Angular 在视图模板中创建样式标签? [英] Angular Create Style Tag in View Template?

查看：23
本文介绍了Angular 在视图模板中创建样式标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个通用的 html 片段组件.我们的想法是我们可以将 html 片段存储在某个 db 中，以及应该应用于它们的样式.

我可以轻松地设置 innerHtml 以将 html 结构插入到我的视图模板中的基本元素中，但是如何在我的视图模板中动态插入 <style> 标签?

这是我所拥有的:

 @Component({模块 ID:module.id，选择器:'htmlFragment'，styleUrls: ['html-fragment.css'],templateUrl:'html-fragment.html'})导出类 HtmlFragmentComponent {@Input() htmlContent: 字符串；@Input() styleContent: 字符串；}

这是视图模板:

<style [innerHTML]="styleContent"></style><div [innerHTML]="htmlContent"></div>

然后我尝试像这样使用它:

 <htmlFragment [htmlContent]='dHtml' [styleContent]="sHtml"></htmlFragment>

地点:

dHtml: string = '
hello this is html
  • bla bla
  • bla bla 2
';sHtml: string = 'ul{list-style-type: none;}';

html 片段正确注入这里:

<div [innerHTML]="htmlContent"></div>

但是这里的样式元素:

 <style [innerHTML]="styleContent"></style>

工作不正常.有没有办法做到这一点?

解决方案

不能在模板本身中完成(Angular 模板编译器不允许这样做，只会删除任何