为什么Angular2在渲染后将随机生成的属性添加到html元素-Java 学习之路

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

DevTools的屏幕截图 .

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

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

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

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

enter image description here

CSS styling problem

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

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

注入HTML的样式格式化为：

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

在这种情况下，CSS正在寻找具有属性[_ngcontent-cxi-6]的span，从而使其无法设置样式 .

Possible solution 这个CSS代码解决了问题

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

注入HTML后编译：

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

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

1 回答