为什么Angular2在渲染后将随机生成的属性添加到html元素

Question

我很难理解为什么Angular2在加载应用程序后将这些奇怪的属性添加到HTML元素中（例如，在提供的屏幕截图＆＃34; _ngcontent-cxi-6＆＃34;）。我通过示例提供了DevTools的截图。

DevTools的屏幕截图。

该属性始终具有固定前缀＆＃34; _ngcontent - ＆＃34;。其余的是随机生成的，但在每个HTML元素上都是一致的。

当我想插入我在Component中生成的HTML或从带有指令[innerHtml]的服务器检索时出现问题。在这种情况下，插入的HTML代码中的元素不会获得Angular的属性：

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

[innerHtml]绑定的结果如下图所示：

CSS样式问题

当我想要使用注入的css文件来设置这些打印元素的样式时，没有任何反应。 使用＆＃34; styleUrls＆＃34;插入CSS文件@Component的属性：

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

注入HTML的样式格式化为：

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

在这种情况下，CSS正在寻找带有[_ngcontent-cxi-6]属性的 span ，因此无法为其设置样式。

可能的解决方案 这个CSS代码解决了问题

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

注入HTML后编译

：

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

但对于这么简单的事情来说，这是一个疯狂的解决方案。

Answer 1

实际上，它取决于您在组件上用于shadow DOM的封装模式。默认情况下，它是模拟模式，因此Angular2会为此添加元素。

• ViewEncapsulation.None - 根本没有Shadow DOM。因此，也没有样式封装。
• ViewEncapsulation.Emulated - 没有Shadow DOM但是样式封装模拟。
• ViewEncapsulation.Native - Native Shadow DOM。