gpt4 book ai didi

javascript - 默认 View 封装在 Angular 中是如何工作的

转载 作者:行者123 更新时间:2023-11-30 07:19:41 26 4
gpt4 key购买 nike

众所周知,angular应用中组件的默认 View 封装是Emulated的,即

encapsulation: ViewEncapsulation.Emulated

如果它不是 shadow dom,我真的不明白它是如何工作的。

最佳答案

angular中的三种封装

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

模拟模式

假设您有两个不同的组件 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 技术

关于javascript - 默认 View 封装在 Angular 中是如何工作的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55494838/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com