angular 属性监听

属性监听

在vue中经常使用watch来监听组件中属性的变化，特别是在使用elementui中的弹窗组件时。

在angular中没有watch，但是可以通过使用生命周期函数ngOnChanges来实现属性的监听

实例

//组件
<app-test [username]="'hhhh'" [age]="12"></app-test>
//组件内部ts
 @Input() username: string = '';
 @Input() age: number = 0;
 //构造器，修改属性
 constructor() {
 }
 ngOnInit(): void {
 }
 ngOnChanges(changes: SimpleChanges): void {
   console.log(changes)
 }

从图片中可以看到changes变量是一个对象，对象里面的属性是组件上绑定的属性。其中属性也是一个对象，对象中的currentValue表示当前值，previousValue表示之前的值。

通过使用生命周期函数ngOnChanges，我们可以实现对组件属性的监听。