我有一个子组件
parent.component.html
<child-component (changeVal) = "parentObj"></child-component>
parent.component.ts
parentObj = {
someDate = new Date()
}
// function changing the parentObj
callOnClick() {
this.parentObj.someDate = new Date('20 June 2018');
}
child component.ts
@Input('changeVal')
ngOnChanges() {
// console i never see
console.log('parentObj Changed and got me here');
}
为什么在这种情况下onChanges挂钩没有运行?我正在改变callOnClick方法中的输入值,当更改changeVal的值时,它是否应该触发?
答案 0 :(得分:6)
<child-component (changeVal) = "parentObj"></child-component>
changeVal
是代码中的输入,但是HTML中的输出。请考虑使用此代码:
<child-component [changeVal] = "parentObj"></child-component>
并声明一个变量作为输入,而不是你的函数。
@Input() changeVal: any;
答案 1 :(得分:2)
如果我没有弄错的话,你正试图将一个物体从父母传给孩子。
parentObj
是一个属性。使用方括号使用属性绑定,如下所示:
<child-component [changeVal] = "parentObj"></child-component>
此外,在child.component.ts中,您必须向属性提供@Input()
装饰器而不是方法。
@Input('changeVal') changeVal = {};
ngOnChanges() {
// console i never see
console.log('parentObj Changed and got me here');
}