此问题在此处已有答案:
Angular 2 - innerHTML styling(11个答案)
5年前关闭。
我将html作为innerHtml传递给我的视图。
<div [innerHTML]="someHtmlCode"></div>
如果我通过了下面的代码,它将正常工作。
this.someHtmlCode = "<div><b>This is my HTML.</b></div>"
如果我传递下面的代码,其中包含颜色,它是不工作的。
this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
3条答案
按热度按时间q5iwbnjs1#
你得到的这个行为是正常的。添加到
innerHTML
的类被忽略了,因为默认情况下封装是Emulated
。这意味着Angular防止样式在组件内部和外部截取。你应该在你的组件中将封装改为None
。这样,你就可以在任何你想要的地方定义类:在styles
中或在单独的.css
、.scss
或.less
样式表中(无所谓),Angular会自动将它们添加到DOM中。m528fe3b2#
我也面临着同样的问题,但在阅读下面的链接后,我想出了解决方案,它是不使用管道
希望这对你有帮助。
https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90
vq8itlhq3#
我将样式放在一个类中,而不是内联样式。
不确定使用
class
是否适合您,但这里有一个Plunker demo。超文本:
在全局根css文件中定义类
demo
,通常称为styles.scss
。CSS: