AngularJS$手表的角度等价物是什么？

在AngularJS中，您可以使用

$scope

的

$watch

函数指定观察者来观察范围变量的变化。观察角度中的变量变化（例如组件变量）的等效功能是什么？

此行为现在是组件生命周期的一部分

组件可以在接口中实现ngOnChanges方法，以访问输入更改

例如：

从'angular2/core'导入{Component，Input，OnChanges}；
@组成部分({
选择器：'hero comp'，
templateUrl:'app/components/hero comp/hero comp.html'，
样式URL:['app/components/hero comp/hero comp.css']，
提供者：[]，
指令：[]，
管道：[]，
输入：[“英雄”，“真实”]
})
导出类HeroComp实现OnChanges{
@输入（）英雄：英雄；
@Input（）实数：字符串；
构造函数（）{
}
ngOnChanges（更改）{
控制台日志（更改）；
}
}

在Angular 2中，变化检测是自动的<代码>$scope.$watch（）和

$scope.$digest（）

R.I.P

不幸的是，《开发人员指南》中的变更检测部分尚未编写（在页面底部的“其他内容”部分中有一个占位符）

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

• Zone.js“monkey patches the world”——它截取浏览器中的所有异步API（当Angular运行时）。这就是为什么我们可以在组件中使用

  setTimeout（）

  ，而不是像

  $timeout

  这样的东西。。。因为

  setTimeout（）

  是猴子补丁
• Angular建立并维护“变化检测器”树。每个组件/指令有一个这样的变化检测器（类）。（您可以通过注入来访问此对象。）这些更改检测器是在Angular创建组件时创建的。它们跟踪所有绑定的状态，以便进行脏检查。从某种意义上说，它们类似于Angular 1为

  {{}}

  模板绑定设置的自动

  $watchs（）

  。
  与Angular 1不同，更改检测图是一个有向树，不能有循环（这使得Angular 2的性能更高，如下所示）
• 当事件触发时（在角度区域内），我们编写的代码（事件处理程序回调）将运行。它可以更新它想要的任何数据——共享应用程序模型/状态和/或组件的视图状态
• 之后，由于添加了hooks Zone.js，它将运行Angular的更改检测算法。默认情况下（即，如果您没有在任何组件上使用

  onPush

  更改检测策略），树中的每个组件都会检查一次（TTL=1）。。。从顶部开始，深入到第一级。（如果您处于开发模式，更改检测将运行两次（TTL=2）。有关详细信息，请参阅。）它使用这些更改检测对象对所有绑定执行脏检查。
  • 生命周期挂钩被称为变更检测的一部分
    如果要查看的组件数据是基本输入属性（字符串、布尔值、数字），则可以实现

    ngochanges（）

    以获得更改通知
    如果输入属性是引用类型（对象、数组等），但引用没有更改（例如，您向现有数组添加了一个项），则需要实现

    ngDoCheck（）

    （有关详细信息，请参阅）
    您应该只更改组件的属性和/或子组件的属性（因为是单树漫游实现，即单向数据流）。这是违反规定的。这里也可以使用状态管道
• 对于发现的任何绑定更改，都会更新组件，然后更新DOM。更改检测现在已完成
• 浏览器会注意到DOM的更改并更新屏幕

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

• -解释如何将AngularJS的想法映射到AngularJS
• -详细解释了发动机罩下的变化检测工作原理
• -Thoughtram博客2016年2月22日-可能是最好的参考
• Savkin的视频-一定要看这个
• -杰哈德的博客2016年2月24日
• 关于Zone.js。布莱恩的是关于Zone.js的。Miško是关于Angular 2如何使用Zone.js实现更改检测的。他还谈到了一般的更改检测，以及一点关于

  onPush

• 维克多·萨夫金斯的博客帖子：。他很快就涵盖了很多领域，但他有时会简明扼要，让你挠头，想知道丢失的部分
• （GoogleDoc）-非常技术，非常简洁，但它描述/绘制了作为树的一部分构建的ChangeDetection类

---

如果除了自动双向绑定之外，还希望在值更改时调用函数，则可以将双向绑定快捷方式语法改为更详细的版本

是的缩写

（参见示例）

你可以这样做：

---

如果要使其成为双向绑定，可以使用

[（yourVar）]

，但必须实现

yourVarChange

事件，并在每次变量更改时调用它

类似这样的东西来追踪英雄的变化

@Output() heroChange = new EventEmitter();

然后当你的英雄被改变时，调用

this.heroChange.emit（this.hero）

[（英雄）]
绑定将为您完成其余的工作

请参见此处的示例：

您可以使用
getter函数
或
get accessor
在angular 2上充当手表

见演示

从'angular2/core'导入{Component}；
@组成部分({
//在index.html中声明组件附加到的标记名
选择器：“你好，世界”，
//此组件的模板的位置
模板：`
推1
我是数组1{{arr
@Component({
  selector: 'input-language',
  template: `
  …
  <input 
    type="text" 
    placeholder="Language" 
    [(ngModel)]="query" 
  />
  `,
})
export class InputLanguageComponent {

  set query(value) {
    this._query = value;
    console.log('query set to :', value)
  }

  get query() {
    return this._query;
  }
}

export class HelloComponent {
  name: string;
  // inject our service, which holds the object we want to watch.
  constructor(private helloService: HelloService){
    // Here I am "watching" for changes by subscribing
    this.helloService.getGreeting().subscribe( greeting => {
      this.name = greeting.value;
    });
  }
}

export class HelloService {
  private helloSubject = new BehaviorSubject<{value: string}>({value: 'hello'});
  constructor(){}
  // similar to using $watch, in order to get updates of our object 
  getGreeting(): Observable<{value:string}> {
    return this.helloSubject;
  }
  // Each time this method is called, each subscriber will receive the updated greeting.
  setGreeting(greeting: string) {
    this.helloSubject.next({value: greeting});
  }
}