Angular4如何处理接口处获取到的带样式的HTML

Question

1. 问题描述：

我从京东万象的新闻数据接口里面获取到一段带有css样式的HTML，通过Angular4的@ViewChild和 ElementRef转义处理后，能够在页面正常显示，但是现在全局（style.css）中加了一个font-size：0属性后之后，就无论如何都无法显示出来。调试时，只要把这个属性取消掉，就可以正常显示。无法知道是什么原因，这个属性必须要有，不能删掉。我试过定义一个Pipe，专门对HTML的样式做转换，但是这个只能用于被加载在angular的template上的HTML，我这个是动态获取的，没有在Template上，所以没什么用。

1. 难点：

1、为什么动态获取到的内容默认使用font-size：0的全局属性，局部定义甚至动态加上css样式都不成功？
2、怎样将获取到的HTML变成angular的Template？

Answer 1

解决办法一：参考Angular里面的抽象类 Renderer2，里面提供了操作DOM的方法。

解决办法二：在该组件下的.scss文件中加一个前缀为/deep/的元素选择器，即可。
解决办法三：定义一个管道类，专门处理带样式的HTML不能正常显示的问题。（此处不适合这种方式）

Answer 2

在你这个组件的元数据对象里面加上这个配置encapsulation: ViewEncapsulation.Native，阻止全局的样式进入你这个组件，应该就能解决你的问题了