2016-08-11 55 views
1

後我有很難理解爲什麼Angular2將這些奇怪的屬性的應用程序被加載後,HTML元素(例如,所提供的屏幕截圖「_ngcontent-CXI-6」)。我用例子提供了DevTools的截圖。爲什麼Angular2添加隨機生成屬性的HTML元素渲染

從DevTools截圖。

該屬性始終有固定的前綴「_ngcontent-」。其餘部分是隨機生成的,但在每個HTML元素上都是一致的。

問題是當我想插入HTML,我在組件產生或從服務器與指令[innerHTML的]檢索。在插入HTML代碼的情況下,要素沒有得到角的屬性:

<span [innerHtml]="'<span>some text </span>'"></span> 

的[innerHTML的]效果的畫面結合如下:

enter image description here

CSS樣式問題

當我想要使用注入的CSS文件來設置這些打印元素的樣式時,什麼都不會發生。 CSS文件插入 「styleUrls」 @Component的屬性:

@Component({ 
    templateUrl: 'someHtmlTemplate.html', 
    styleUrls: ['someCSSfile.css'], 
}) 

風格是被注入HTML被格式化成這樣:

span[_ngcontent-cxi-6] { 
    background: pink; 
    font-size: 20px; 
} 

在這種情況下,CSS正在尋找跨度具有屬性[_ngcontent-CXI-6],從而使其不能樣式。

可能的解決方法 這個CSS代碼解決的事情

:host >>> h3 { color: red; } 

被注射後編譯成HTML:

[_nghost-krr-4] > > > span { 
    background: pink; 
    font-size: 20px; 
} 

但它是這麼簡單的東西瘋狂的迂迴方案。

回答

1

實際上,它取決於您在組件上用於影子DOM的封裝模式。默認情況下,它是模擬模式,所以Angular2爲此添加了元素。

  • ViewEncapsulation.None - 根本沒有Shadow DOM。所以也沒有樣式封裝。
  • ViewEncapsulation.Emulated - 沒有Shadow DOM,但是樣式封裝模擬。
  • ViewEncapsulation.Native - Native Shadow DOM。