Angular Academy · 课时

视图封装模式

Q: 「视图封装模式」这节课中我会学到什么？

比较 Emulated、None 和 ShadowDom。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

比较 Emulated、None 和 ShadowDom。

视图封装模式 是 CoddyKit 上的免费 Angular Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

什么是视图封装

视图封装用于控制组件样式如何与页面的其他部分隔离。Angular 通过 encapsulation 属性提供三种模式。

设置模式

请在 @Component 装饰器中使用 ViewEncapsulation 枚举设置模式。

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "app-card",
  encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}

Emulated（默认）

Emulated 是默认模式。Angular 会通过向元素和选择器添加唯一属性来模拟作用域样式，而不会使用原生 Shadow DOM。

@Component({
  encapsulation: ViewEncapsulation.Emulated
})

Emulated 的工作方式

Emulated 模式会使用生成的属性重写选择器，从而在所有浏览器中实现作用域限定，而不要求浏览器支持 Shadow DOM。

/* you write */
.title { color: blue; }

/* angular emits */
.title[_ngcontent-xyz] { color: blue; }

None

None 会完全禁用封装。组件样式会变成全局样式，并可能影响页面上的任何元素。

@Component({
  encapsulation: ViewEncapsulation.None,
  styles: [".title { color: red; }"]
})
// .title now applies app-wide

何时使用 None

请谨慎使用 None，例如从一个组件中定义共享主题规则。请注意，样式可能会在全局范围内发生冲突。

ShadowDom

ShadowDom 使用浏览器原生的 Shadow DOM，真正隔离组件标记和样式。

@Component({
  selector: "app-widget",
  encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}

ShadowDom 的不同之处

使用 ShadowDom 时，组件会在真实的影子根中渲染。全局样式无法穿透进入其中，组件样式也不会泄漏到外部，因此能够实现最强的隔离。

样式泄漏对比

Emulated 可防止样式向外泄漏，但全局样式仍能定位其中的元素；None 不提供隔离；ShadowDom 则会完全阻断两个方向的影响。

选择模式

绝大多数情况下请使用 Emulated。对于需要完全隔离的小部件，请使用 ShadowDom；只有在确实需要全局样式时才使用 None。

封装与全局样式

请记住，全局 styles.css 无论采用哪种模式都会生效，但在 ShadowDom 组件内部除外，因为全局样式无法到达其中。

快速检查

测试您对视图封装模式的理解。

回顾

Angular 提供三种封装模式：Emulated（默认，模拟作用域）、None（全局样式）和 ShadowDom（原生隔离）。Emulated 适用于大多数情况，ShadowDom 提供最强的隔离。

常见问题解答

「视图封装模式」课时是免费的吗？

是的 — 「视图封装模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「视图封装模式」这节课中我会学到什么？

比较 Emulated、None 和 ShadowDom。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「视图封装模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy