Angular 2 的 DOM 操作答案

【问题标题】：DOM manipulation for Angular 2Angular 2 的 DOM 操作
【发布时间】：2017-04-07 23:25:34
【问题描述】：

我有一个关于 Angular 2 内部 DOM 操作的“简单”问题。 Angular 2 是使用虚拟 DOM、增量 DOM 还是什么。我一直在互联网上寻找了解 Angular 2 在内部用于 DOM 操作的内容，但我似乎找不到。

我了解他们如何创建组件以及他们如何让我们开发人员使用我们想要的封装策略。

我知道它使用区域来检测更改并使用可观察对象来应用更改，但是它们是为内部 DOM 操作提出了自己的逻辑，还是在真实 DOM 上进行操作？

React 有 virtual dom，Ember 使用 glimmer，其他框架使用增量 dom。 Angular 2 使用什么？

TIA。

【问题讨论】：

您可以使用 Angular2 中的指令操作 DOM angular.io/docs/ts/latest/guide/attribute-directives.html
嘿@tibbus 感谢您的评论。我希望了解 Angular 2 如何在内部操作 DOM。 React 使用虚拟 DOM。
看看[blog.thoughtram.io/angular/2015/06/29/…]
伙计们，我读过很多文章，这就是其中之一。请理解，Pretch 是在谈论组件如何使用不同的策略进行封装。您可以使用影子 DOM 或模拟。那不是我的问题。我的问题是，一旦 Angular 2 检测到更改，它会使用什么算法来了解更改了哪些组件以及如何使用该更改“修补”真实 dom。我相信完全不同的主题。
@btinoco 了解变化检测策略这将有助于blog.angular-university.io/…

标签： dom angular virtual-dom

【解决方案1】：

每当我们创建一个组件时，Angular 都会将它的模板放入一个 shadowRoot，这是该特定组件的 Shadow DOM。这样做，我们可以免费获得 DOM 树和样式封装，对吧？但是如果我们在浏览器中没有 Shadow DOM 怎么办？这是否意味着我们不能在那些环境中使用 Angular 2？我们可以。事实上，Angular 2 默认情况下不使用本机 Shadow DOM，它使用仿真。成为技术上是正确的，它也不会为我们创建一个shadowRoot 组件，以防不使用原生 Shadow DOM。

【讨论】：

感谢@manolis 的回答。请参阅 React 使用虚拟 dom 在内部操作 dom。它对真实 dom 与虚拟 dom 进行了比较，并修补了更改的节点。 Ember 与 Glimmer 一起操纵 dom。然后我们有增量 dom 来操作其他框架中的 dom。我想知道 Angular 2 使用什么？像虚拟 dom、微光、增量 dom、原始 dom 还是什么？