1. 首页
  2. 问题
  3. AngularJS $watch 的 Angular 等价物是什么？
小编典典

AngularJS $watch 的 Angular 等价物是什么？

all

在 AngularJS 中，您可以$watch使用$scope. 在 Angular 中观察变量变化（例如，在组件变量中）的等价物是什么？


阅读 67

收藏
2022-06-11

共1个答案

小编典典

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

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

以下是我对变更检测如何工作的理解：

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

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

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

  • 之后，由于 Zone.js 添加了钩子，它会运行 Angular 的变化检测算法。默认情况下（即，如果您没有onPush在任何组件上使用更改检测策略），树中的每个组件都会被检查一次（TTL=1）......从顶部开始，以深度优先的顺序。（好吧，如果您处于开发模式，更改检测会运行两次（TTL=2）。有关此内容的更多信息，请参见ApplicationRef.tick()。）它使用那些更改检测器对象对您的所有绑定执行脏检查。

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

  • 对于找到的任何绑定更改，将更新组件，然后更新 DOM。更改检测现已完成。

  • 浏览器会注意到 DOM 的变化并更新屏幕。

了解更多信息的其他参考资料：

2022-06-11