本文没有任何技术含量

angular中有时需要动态插入HTML内容,直接使用差值表达式插入内容,将会以类似于innerText的方法插入,其中的HTML tag将会被转义,难以获得预期效果。

stack overflow找到该问题的解决方案:

即使用以下形式进行绑定:

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

且根据官网文档,使用该方法插入的HTML内容将会过滤掉其中的<script>标签内容以保证安全。

但随后发现,原模板中的CSS信息对使用该方法插入的HTML内容无效,经过查找,发现有人发了issue,并有人提供了解决方案

即在component装饰器中添加以下选项

@Component({
    encapsulation: ViewEncapsulation.None
})