Angular中innerHTML标签样式不起作用的原因分析

1.背景

在最近的角度项目中，您需要使用[innerHTML]标记来指定div的样式：

//HTML part div class=' contents '[inner HTML]=' contents '/div//ts part contents=' p商品信息字段brspan style=' color:red商品信息介绍/span/p '；然而，上面的风格并不起作用。查看Chorme中的源代码，我们发现在编译Angular的时候，样式标签的样式被屏蔽了。这是为什么？别担心，请往下看。

2.解决方法

先说解决方案，再分析这个问题的原因。修改上面的TS:

//从所用页面上的“@ angular/platform-browser”引入DOM洗手液导入{DOM洗手液}；//将洗手液对象构造函数(private洗手液： DOM洗手液)注入构造函数{ }//处理HTML代码。这个。内容=这个。洗手液. bypasssecuritytrustml(' pw3商品信息字段brspan style=' color:red商品信息介绍/span/p’；虽然这可以解决问题，但还不够：

代码冗余比较复杂：如果我们的内容太大，我们的代码就会显得凌乱，影响可读性和美观性；不能重用：如果innerHTML标签在其他ts中使用，需要重写上面的TS内容，不可重用；

基于以上两点，我们使用自定义管道优化了上述代码，使用ng generate pipe safe-html命令生成管道，并进行适当的修改：

//对safe-html.pipe.ts brbr从“@ angular/core”导入{pipe，pipe transform }；从“@angular/platform-browser”导入{ domHealth }；@Pipe({name: 'safeHtml'})导出类SafeHtmlPipe实现Pipe transform { constructor(private healthed : dommership){ } transform(value){ return this . healthed . bypasssecuritytrushtml(value)；}}brbr//在使用innerHTML标记的属性中使用上述safeHtml管道div class=' contents '[innerHTML]=' contents | safe html '/div

3.理由和原则

那么，你为什么会有以上问题呢？最初，在Angular中，默认情况下所有输入值都被视为不受信任。当我们使用属性、属性、样式、类绑定或插值时，

当将模板中的值插入到DOM中时，Angular将帮助我们清除和转义不可信的值。在开头的示例中，span标记中的样式被阻止。请参见：

Angular编译时，会自动清理HTML输入，转义不安全代码。因此，在这种情况下，样式被阻止，样式无效。此时，如果需要渲染样式片段，

你需要多美消毒。DOM洗手液可以在不同的DOM上下文中将值净化成安全的内容，这有助于我们防止跨站点脚本攻击(XSS)类的安全问题。

摘要

以上是边肖在Angular中介绍的innerHTML标签样式无法工作的原因分析。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！