鍍金池/ 問答/HTML5  HTML/ Angular4如何處理接口處獲取到的帶樣式的HTML

Angular4如何處理接口處獲取到的帶樣式的HTML

  1. 問題描述:

我從京東萬象的新聞數(shù)據(jù)接口里面獲取到一段帶有css樣式的HTML,通過Angular4的@ViewChild和 ElementRef轉義處理后,能夠在頁面正常顯示,但是現(xiàn)在全局(style.css)中加了一個font-size:0屬性后之后,就無論如何都無法顯示出來。調試時,只要把這個屬性取消掉,就可以正常顯示。無法知道是什么原因,這個屬性必須要有,不能刪掉。我試過定義一個Pipe,專門對HTML的樣式做轉換,但是這個只能用于被加載在angular的template上的HTML,我這個是動態(tài)獲取的,沒有在Template上,所以沒什么用。

  1. 難點:

1、為什么動態(tài)獲取到的內容默認使用font-size:0的全局屬性,局部定義甚至動態(tài)加上css樣式都不成功?
2、怎樣將獲取到的HTML變成angular的Template?

回答
編輯回答
來守候

在你這個組件的元數(shù)據(jù)對象里面加上這個配置encapsulation: ViewEncapsulation.Native,阻止全局的樣式進入你這個組件,應該就能解決你的問題了

2017年12月6日 03:57
編輯回答
乖乖噠

解決辦法一:參考Angular里面的抽象類 Renderer2,里面提供了操作DOM的方法。

clipboard.png
解決辦法二:在該組件下的.scss文件中加一個前綴為/deep/的元素選擇器,即可。
解決辦法三:定義一個管道類,專門處理帶樣式的HTML不能正常顯示的問題。(此處不適合這種方式)

2018年9月4日 05:00