H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

  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?

回答:

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

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

回答:

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

本文地址:H5W3 » Angular4如何处理接口处获取到的带样式的HTML

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址