默认视图封装如何在Angular中工作

Question

众所周知，Angular应用程序中组件的默认视图封装是模拟的，即

encapsulation: ViewEncapsulation.Emulated

我真的不明白，如果它不是影子圆顶，它在引擎盖后面是如何工作的。

Answer 1

Angular 中的封装分为三种类型

模拟模式

假设您有两个不同的组件 comp-first 和 comp-second ，例如您在两者中定义

<p> Some paragraph </p>

因此，如果您在 comp-first.css 中为段落应用一些样式

p { 
   color: blue; 
 }

然后检查 comp-first.html 上的 p 元素并查找其样式，会发现类似这样的内容

p[_ngcontent-ejo-1] {
  color: blue;
}

“_ngcontent-ejo-1”只是一个简单的键，用于区分此类元素与其他组件元素

如果您将此模式应用于这样的组件，例如 comp-first，然后您去检查任何元素，它不会向任何元素提供任何属性，如“_ngcontent-ejo-1”，因此应用任何样式或类时，它将提供全球。

这应该会产生与使用模拟模式相同的结果，但它在支持它的浏览器中附带了 Shadow DOM 技术

Answer 2

当你写

<div class="XXX"></div>

与风格

XXX { color: red; }

编译器会将其转换为

<div class="XXX" ng_host_c22></div>

与风格

XXX[ng_host_c22] { color: red; }

它只是向您的元素和样式添加了一个唯一的（随机生成的）属性，以避免它们与其他样式相冲突。

这意味着，如果您XXX在2个不同的组件中声明该类，则它们将具有不同的属性，并且不会相互影响。