angular - 为什么孩子没有检测到来自父母输入的角度变化

Question

我有一个子组件

父组件.html

 <child-component (changeVal) = "parentObj"></child-component>

父组件.ts

parentObj = {
  someDate = new Date()
}
// function changing the parentObj
callOnClick() {
   this.parentObj.someDate = new Date('20 June 2018'); 
}

子组件.ts

@Input('changeVal')
ngOnChanges() {
 // console i never see
 console.log('parentObj Changed and got me here');
}

为什么在这种情况下 onChanges 钩子没有运行？我正在更改 callOnClick 方法中的输入值，当 changeVal 的值更改时它不应该触发吗？

Answer 1

<child-component (changeVal) = "parentObj"></child-component>

changeVal是代码中的输入，但 HTML 中的输出。考虑改用这个：

<child-component [changeVal] = "parentObj"></child-component>

并声明一个变量作为输入，而不是你的函数。

@Input() changeVal: any;

Answer 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');
    }