Angular等效于AngularJS $ watch？

Question

在AngularJS中，您可以使用的$watch功能指定观察者以观察范围变量的变化$scope。在Angular中监视变量更改（例如，在组件变量中）相当于什么？

Answer 1

在Angular 2中，更改检测是自动的… $scope.$watch()和$scope.$digest()RIP

不幸的是，开发指南的“变更检测”部分尚未编写（“
体系结构概述”页面底部“其他内容”
附近有一个占位符）。

这是我对变更检测的工作原理的理解：

• Zone.js是“猴子为世界打补丁”-拦截浏览器中的所有异步API（当Angular运行时）。这就是为什么我们可以setTimeout()在组件内部使用而不是诸如$timeout…之类的原因，因为setTimeout()猴子打了补丁。

• Angular构建并维护“变化检测器”树。每个组件/指令只有一个这样的变化检测器（类）。（您可以通过注入来访问该对象ChangeDetectorRef。）这些变化检测器是在Angular创建组件时创建的。他们跟踪所有绑定的状态，以进行脏检查。从某种意义上讲，它们类似于$watches()Angular 1为{{}}模板绑定设置的自动功能。
  与Angular 1不同，更改检测图是有向树，不能有循环（这使Angular 2的性能更高，如下所示）。
  

• 当事件触发时（在Angular区域内），我们编写的代码（事件处理程序回调）将运行。它可以更新所需的任何数据-共享应用程序模型/状态和/或组件的视图状态。

• 之后，由于添加了挂接Zone.js，它将运行Angular的更改检测算法。默认情况下（即，如果未onPush在任何组件上使用更改检测策略），则从树顶开始按深度优先顺序对树中的每个组件进行一次检查（TTL = 1）…。（好吧，如果您处于开发人员模式，则更改检测运行两次（TTL = 2）。有关更多信息，请参见ApplicationRef.tick（）。）它将使用那些更改检测器对象对所有绑定执行脏检查。

  • 生命周期挂钩被称为变更检测的一部分。
    如果要监视的组件数据是原始输入属性（字符串，布尔值，数字），则可以实施ngOnChanges()以通知更改。
    如果输入属性是引用类型（对象，数组等），但是引用没有更改（例如，您将项目添加到现有数组中），则需要实现ngDoCheck()（有关更多信息，请参见此SO答案）在此）。
    您应该仅更改组件的属性和/或后代组件的属性（由于单树遍历实现-
    即单向数据流）。这是违反了这一点的pl子。有状态的管道也可以将您绊倒在这里。

• 对于找到的任何绑定更改，将更新组件，然后更新DOM。变更检测到此结束。

• 浏览器会注意到DOM更改并更新了屏幕。

其他参考以了解更多信息：

• Angular的$ digest在较新版本的Angular中重生 -解释了AngularJS的想法如何映射到Angular
• 您需要了解有关Angular中的变更检测的所有内容 -详细说明变更检测如何在后台进行
• 解释变更检测 -Thoughtram博客2016年2月22日-可能是那里最好的参考
• Savkin的变更检测重塑视频-一定要观看此视频
• Angular 2更改检测如何真正起作用？-jhade的博客2016年2月24日
• Brian的视频和Miško的有关Zone.js 的视频。Brian的主题是Zone.js。Miško讨论了Angular 2如何使用Zone.js实现变更检测。他还大致讨论了更改检测，还有一些有关onPush。
• 维克多Savkins博客日志：变化检测在角2，折角2个应用两个阶段，棱角分明，不变性和封装。他很快就覆盖了很多地面，但是有时他可能会很紧，而您却挠头，想知道丢失的部分。
• 超快速变更检测（Google doc）-非常技术性，非常简洁，但是它描述/添加了作为树的一部分而构建的ChangeDetection类