目录
阅读时间： 2 分钟
简介
Angular应用程序是用标准的CSS样式设计的。因此，这意味着你可以将你所知道的关于CSS样式表、选择器、规则以及媒体查询的一切直接应用于Angular应用程序。
然而，Angular可以将组件样式与组件捆绑在一起，实现比常规样式表更模块化的设计。
因此，对于你编写的每一个Angular组件，你不仅可以定义一个HTML模板
，而且还可以定义与该模板配套的CSS样式，指定你需要的任何选择器、规则和媒体查询。
因此，视图封装定义了在组件内定义的模板和样式是否可以影响整个应用程序，反之亦然。
组件的装饰器提供了封装选项，可以用来控制如何在每个组件的基础上应用封装。
有3种类型的视图封装。
- ViewEncapsulation.None
- ViewEncapsulation.Emulated
- ViewEncapsulation.ShadowDom
ViewEncapsulation.None
Angular不应用任何形式的视图封装，这意味着为组件指定的任何样式。因此，它们是全局应用的，可以影响应用中存在的任何HTML元素。因此，这种模式在本质上与将样式纳入HTML本身是一样的。
@Component({
因此，在ViewEncapsulation.None中，样式是在DOM的head部分，并且是在组件的范围内。组件没有影子DOM，组件的样式可以影响DOM中的所有节点。
ViewEncapsulation.Emulated
Angular修改了组件的CSS选择器，因此它们只适用于该组件的视图。
此外，他们不影响应用程序中的其他元素*（模仿*Shadow DOM行为）。
@Component({
因此，在ViewEncapsulation.Emulated中，Angular在DOM的head部分创建了样式，并给了组件一个任意的ID。在ID的基础上，选择器样式具有该组件的范围。
ViewEncapsulation.ShadowDom
Angular使用浏览器内置的Shadow DOM API）将组件的视图封装在ShadowRoot（用作组件的宿主元素）内。因此，我们以一种孤立的方式应用所提供的样式。
@Component({
因此，在ViewEncapsulation.Native ，Angular创建了一个Shadow DOM，此外，样式也是针对该Shadow DOM的。
总结
在这篇博客中，我们了解了什么是Angular的视图封装。此外，它是如何影响应用于组件和其相关组件的样式的。
视图封装定义了在组件中定义的模板和样式是否可以影响整个应用程序，反之亦然。因此Angular提供了三种封装策略，即Emulated、 Shadow DOM和No Enapsulation。
演示项目Repo链接 -github.com/knolderdev/…
