Question

以角度方式工作时，在确定何时使用以及为什么使用View Encapsulation时应使用特定的规则或准则吗？

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None  /*What is the use of this line*/
})

有人可以用简单的方式解释吗？

Answer 1

Codecraft.TV在ViewEncapsulation上有一篇很棒的文章，您可以参考以获得更好的理解。

总结一下：

ViewEncapsulation.Emulated ：Angular通过使用自动生成的属性将我们的通用CSS类选择器更改为仅针对单个组件类型的选择器。

我们在组件上定义的任何样式都不会泄漏到应用程序的其余部分，但是使用ViewEncapsulation.Emulated，我们的组件仍然继承全局样式。

ViewEncapsulation.Native ：如果我们希望Angular使用影子DOM，则可以将封装参数设置为使用ViewEncapsulation.Native

使用ViewEncapsulation.Native样式，我们在组件上设置的样式不会泄漏到组件范围之外。

如果我们要定义一个我们希望人们单独使用的第三方组件，那就太好了。我们可以使用css样式描述组件的外观，而不必担心我们的样式会泄漏出去并影响应用程序的其余部分。

不过，对于ViewEncapsulation.Native，我们的组件也与我们为应用程序定义的全局样式无关。因此，我们不必继承全局样式，而必须在组件装饰器上定义所有必需的样式。

最后，ViewEncapsulation.Native需要一种称为影子DOM的功能，并非所有浏览器都支持该功能。

ViewEncapsulation.None ：如果我们根本不想封装，可以使用ViewEncapsulation.None。

如果我们不封装任何内容，则我们在组件中定义的样式将泄漏并开始影响其他组件。

您可能需要查看的其他一些资源：

Answer 2

让我们举一个例子，我们有一个父级和一个子级组件，它们都有自己的html，ts，css文件。

假设在父组件的html中您引用了子组件，如下所示

parent.component.html -> <app-child> </app-child>

现在，如果您在child.component.css中创建并添加任何类似的样式（例如parent.component.css文件）（以<p>标签为例），那么即使将这些样式分别添加到每个组件，即使所有角度组件的html都在单个页面上呈现。因此，现在您在子组件中将为<p>使用不同的样式。（在Angle的背后，每个组件然后向该组件中的所有元素添加一个random_atttr）

这种角度的行为来自视图封装。并非所有浏览器都支持有角度的阴影DOM技术，但有角度的这样做。 ViewEncapsulation有3个选项-

encapsulation: ViewEncapsulation.None, 
           ViewEncapsulation.Emulated, (-- this is default)
           ViewEncapsulation.Native (-- only applies to browsers with shadow DOM technology)<br>

我们何时以及为什么应该在角度使用View Encapsulation

2 个答案:

总结一下：