1. Emulated (默认模式): 这是 Angular 默认的视图封装模式。在这个模式下，Angular 将组件样式封装在组件的 Shadow DOM 中，以确保组件样式不会泄漏到其他组件。这是通过给组件生成的 HTML 元素添加唯一的属性和样式选择器来实现的。
在组件的元数据中，你可以通过设置 encapsulation 属性来显式指定使用这种模式：
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
encapsulation: ViewEncapsulation.Emulated // 默认值，可以省略
})
2. None 模式： 在这个模式下，Angular 不会对组件样式进行任何封装。组件样式会直接影响到全局样式，可能导致样式冲突。这种模式通常用于一些特殊需求，谨慎使用。
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
encapsulation: ViewEncapsulation.None
})
3. ShadowDom 模式： 这是一个实验性的模式，用于启用 Shadow DOM。在这个模式下，Angular 将使用浏览器原生的 Shadow DOM 特性来进行封装。这需要浏览器支持 Shadow DOM，因此并不适用于所有浏览器。
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
选择适当的视图封装模式取决于项目的需求和设计决策。默认的 Emulated 模式通常是一个不错的选择，因为它提供了样式的封装而不依赖于浏览器的 Shadow DOM 支持。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4911/Angular