angular 属性监听
属性监听在vue中经常使用watch来监听组件中属性的变化,特别是在使用elementui中的弹窗组件时。在angular中没有watch,但是可以通过使用生命周期函数ngOnChanges来实现属性的监听实例//组件<app-test [username]="'hhhh'" [age]="12"></app-test>//组件内部ts@Input() username:
·
属性监听
在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
,我们可以实现对组件属性的监听。
更多推荐
已为社区贡献19条内容
所有评论(0)