当数据绑定输入属性的值发生变化的时候,Angular 将会主动调用 ngOnChanges 方法。它会获得一个 SimpleChanges 对象,包含绑定属性的新值和旧值,它主要用于监测组件输入属性的变化。具体示例如下:
这个例子是父组件引用一个子组件,子组件的页面上有计算器,根据父组件传递的初始值进行运行,进行加减1的运算。父组件可以多次传值修改子组件的初始值。
import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
selector: 'exe-Child',
template: `
<p>当前值: {{ count }}</p>
<button (click)="increment()"> + </button>
<button (click)="decrement()"> - </button>
`
})
export class ChildComponent implements OnChanges{
@Input() count: number = 0;
ngOnChanges(changes: SimpleChanges) {
console.dir(changes['count']);
}
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
注意:
1.在构造函数中是获取不到输入属性的值
在子组件的构造函数中,是无法获取输入属性的值,只能在 ngOnChanges 或 ngOnInit 钩子中获取到。因为子组件的构造函数会优先执行,当子组件输入属性变化时会自动调用 ngOnChanges 钩子,然后在调用 ngOnInit 钩子,所以在 ngOnInit 钩子内能获取到输入的属性。