後我有很難理解爲什麼Angular2將這些奇怪的屬性的應用程序被加載後,HTML元素(例如,所提供的屏幕截圖「_ngcontent-CXI-6」)。我用例子提供了DevTools的截圖。爲什麼Angular2添加隨機生成屬性的HTML元素渲染
從DevTools截圖。
該屬性始終有固定的前綴「_ngcontent-」。其餘部分是隨機生成的,但在每個HTML元素上都是一致的。
問題是當我想插入HTML,我在組件產生或從服務器與指令[innerHTML的]檢索。在插入HTML代碼的情況下,要素沒有得到角的屬性:
<span [innerHtml]="'<span>some text </span>'"></span>
的[innerHTML的]效果的畫面結合如下:
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;
}
但它是這麼簡單的東西瘋狂的迂迴方案。