Angular 中的 View Encapsulation 是什么？

Question

Accepted Answer

**View Encapsulation** 控制组件的 CSS 如何被限定作用域——默认情况下，Angular **隔离每个组件的样式**，以便它们不会泄漏到其他组件或受其他组件影响。这解决了 CSS 的全局作用域问题。 ## 默认值：Emulated 封装 ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // ONLY affects this component's

// encapsulation: ViewEncapsulation.Emulated (the default — no need to specify) }) export class CardComponent {} ``` 使用默认的 `Emulated` 模式，那个 `h2 { color: blue }` 不会影响其他组件中的 `

`，外部样式也不会渗入这个组件。 ## Emulated 的底层工作原理 ```html
Title
``` Angular 自动为组件的元素添加唯一的 `_ngcontent`/`_nghost` 属性，并重写其 CSS 选择器以仅匹配它们——在不需要原生 Shadow DOM 的情况下模拟作用域样式。 ## 三种模式 ```text ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere) ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation) ViewEncapsulation.None → NO scoping — styles are global (leak everywhere) ``` ## 在需要时突破封装 ```css /* style a child component's internals from the parent / :host { display: block; } / the component's own host element / :host(.active) { ... } / host with a class / ::ng-deep .child-class { color: red; } / pierce into children (use sparingly — deprecated-ish) */ ``` `:host` 为组件自身的根元素设置样式；`::ng-deep` 强制样式穿透到子元素（功能强大但不推荐使用——它会破坏封装）。 ## 为什么这很重要 View Encapsulation 使 Angular 组件可以安全地独立设置样式——你可以在一个组件中写 `h2 { color: blue }`，而无需担心破坏应用中所有的 `