默认视图封装在 Angular 中的工作原理

Question

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

encapsulation: ViewEncapsulation.Emulated

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

Answer 1

角度有三种类型的封装

• ViewEncapsulation.Emulated，这是默认设置的
• ViewEncapsulation.None
• ViewEncapsulation.Native

模拟模式

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

<p> Some paragraph </p>

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

p { 
color: blue; 
}

然后在 comp-first 上检查 p 元素.html并寻找它的样式会发现类似这样的东西

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

它只是为您的元素和样式添加一个唯一的(随机生成的)属性，以避免它们与其他样式串通。

这意味着如果你在 2 个不同的组件中声明类XXX，那么它们将具有不同的属性，而不是串通。