angular监听输入框值的变化_angular2+监测属性的变化

angular项目中通过@Input来实现从父component到子component属性的传值。angular框架本身提供了一系列的钩子函数， 其中ngOnchange是对传入值进行监测，只要传入值有所变化，就会进入ngOnchange钩子函数。

曾经一度也是认为，属性的监测理所当然应该是在ngChange里操作。但自从远方的朋友给了这样一个comments:

查阅了相关资料，setter相较于ngOnchange的好处，大致可以理解为，ngOnChange执行的时候，会监测所有@Input属性的变化，但有的时候我们往往只需要对某一个属性进行监测，所以用setter更简洁方便， 详情：https://ngdev.space/angular-2-input-property-changes-detection-3ccbf7e366d2

但令我好奇的是，angular关于@Input的实现原理到底是什么，为什么只要输入参数有所变化就会，进入setter这个钩子函数呢？

查阅了angular关于@Input的源码库，其实现逻辑为：

@Input 传入即是从父组件的dom元素取值赋值给子组件变量的一个过程。即是赋值操作，自然会进入setter函数，也就是说只要父组件dom元素的值发生变化，即会发生一次赋值操作进入setter钩子函数。

问题又来了， 父组件是怎么监测到dom元素值发生变化的呢？

这就涉及到一个永恒的话题，变化监测，Angular的变化检测可以分组件进行，每个组件都有对应的变化检测器ChangeDetector。这里先不深入探究。关于angular变化监测这个深坑，一定要细细品味，深入骨髓。。。

https://zhuanlan.zhihu.com/p/27901766 (先贴一个链接，回头慢慢看)

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html