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

【问题标题】：Why is Angular2 adding random generated attributes to html elements after render为什么Angular2在渲染后向html元素添加随机生成的属性
【发布时间】：2016-12-18 09:02:36
【问题描述】：

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

来自 DevTools 的屏幕截图。

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

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

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

[innerHtml] 绑定结果如下图：

CSS 样式问题

当我想使用注入的 css 文件来设置这些打印元素的样式时，什么也没有发生。 CSS 文件使用@Component 的“styleUrls”属性插入：

@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;
}

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

【问题讨论】：

标签： html dom angular

【解决方案1】：

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

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

【讨论】：