在 Angular 4 中，ViewEncapsulation 是一个非常重要的概念，它用于控制组件样式的封装性。通过 ViewEncapsulation，我们可以决定组件的样式是否会影响到其子组件或父组件。
1. ViewEncapsulation 的三种模式
在 Angular 4 中，ViewEncapsulation 一共有三种模式：
1.1. Emulated
Emulated 模式是默认的模式，它会通过给每个组件生成一个唯一的属性来实现样式的封装。这样可以确保组件的样式只会影响到该组件本身，不会影响到其子组件或父组件。
示例代码：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
----------- --------------
--
------- --
-- -
------ ----
-
---
-------------- --------------------------
--
------ ----- ---------------- -
-- --------- ----- ----
-1.2. Native
Native 模式会使用浏览器原生的 Shadow DOM 技术来实现样式的封装。这样可以确保组件的样式只会影响到该组件本身，不会影响到其子组件或父组件。
示例代码：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
----------- --------------
--
------- --
-- -
------ -----
-
---
-------------- ------------------------
--
------ ----- ---------------- -
-- --------- ----- ----
-1.3. None
None 模式会取消样式的封装，即组件的样式会影响到其子组件或父组件。这种模式一般不推荐使用，因为会导致样式冲突的问题。
示例代码：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
----------- --------------
--
------- --
-- -
------ ------
-
---
-------------- ----------------------
--
------ ----- ---------------- -
-- --------- ----- ----
-2. 总结
ViewEncapsulation 是 Angular 4 中控制组件样式封装性的重要机制，通过选择不同的模式可以灵活地控制组件样式的影响范围。在实际开发中，根据具体需求选择合适的模式是非常重要的。