嘿，棱角分明的爱好者！欢迎来到我的第二篇文章！今天，我们将深入了解Angular观点封装的迷人世界。我们将探索不同的封装策略，揭开模拟和阴影DOM的奥秘，并在此过程中学习一些最佳实践。让我们开始！

角封装三重奏

在Angular中，有三种封装策略：无，模拟和阴影。每个都有其独特的特征和用例。这是一个快速分解：

• 无：此策略禁用封装，允许样式泄漏并影响整个应用程序。
• 模拟：角，模拟的封装中的默认策略模仿了阴影DOM的行为，而无需使用本机实现。这样可以确保与不支持Shadow dom的较旧浏览器的兼容性。
• Shadowdom ：此策略使用本地阴影DOM，提供真实的样式封装和其他好处。但是，所有浏览器都不支持它，因此请谨慎使用。

模拟封装已揭晓

使用仿真封装时，Angular将唯一属性添加到您的HTML元素中，并相应地修改CSS选择器。这样可以防止样式从组件中泄漏出来。让我们看一个例子：

<!-- app.component.html -->
<app-custom-element>
  <h2>Angular is Amazing!</h2>
</app-custom-element>

通过模拟封装，app-custom-element内的H2元素将获得像_ngcontent-abc123这样的唯一属性。 Angular还将将H2元素的CSS选择器修改为h2[_ngcontent-abc123]。这样可以确保应用于此H2元素的样式不会影响应用程序中的其他H2元素。

但是，有一个警告！模拟的封装不允许您将样式应用于投影内容（例如，使用ng-content插入内容）。因此，如果您需要样式的投影内容，请考虑使用Shadowdom封装。

影子dom传奇

Shadow Dom封装提供了真实的样式封装，但不支持全局样式。当使用Shadow dom时，Angular为您的组件创建阴影根，并在此隔离范围内应用样式。这意味着组件内定义的样式不会泄漏，并且全局样式不会影响组件。

例如，如果您具有 h2 元素的全局样式，并且使用app-custom-element的shadow dom封装，则全局样式将不适用于 h2 element在组件内。

但是，Shadow dom封装使您能够样式的投影内容，这是不可能的。

封装爱好者的最佳实践

作为一个角色狂热者，在处理视图封装时必须遵循最佳实践。这里有一些技巧可以让您入门：

1. 选择正确的封装策略：了解每个策略的利弊，然后选择适合您项目要求的策略。
2. 利用Angular的组件体系结构：组件是Angular Apps的基础。使用封装来创建模块化，可维护和可扩展的代码。

仅此而已！希望您喜欢Angular的观点封装的这一小冒险。请继续关注更多与角度相关的内容和愉快的编码！ ð