Angular订阅@Input对象更改

Question

我的父组件中有一个对象，它看起来像这样，并向下传递给我的子组件（app-custom-component）：

myObject = {
  name: 'John'
}
...
<app-custom-component [inputObject]="myObject"></app-custom-component>

在我的子组件（app-custom-component）中，我这样做：

@Input() inputObject;
displayName = '';

ngOnInit() {
  this.displayName = this.inputObject.name;
}
...
<label>{{displayName}}</label>

但是当我在父组件中更改myObject.name时，它不会更新子组件的displayName。

在父组件中更改displayName时如何更新myObject.name？

https://stackblitz.com/edit/angular-mqiorv

Answer 1

用getter代替displayName会容易得多。

@Input() inputObject;

ngOnInit() {

}

get displayName(){
   return this.inputObject.name;
}

...

<label>{{displayName}}</label>

Answer 2

对输入使用getter和setter方法

@Input() 
get inputObject()  {
    return this.displayName;
}
set inputObject(value) {
     this.displayName = this.inputObject.name;
}

Answer 3

据我所知，初始化组件时，onInit（）仅执行一次。尝试将代码也放入ngOnChanges（）。

deploy:assets:backup_manifest

Answer 4

您可以使用ngOnChange()并跟踪相关@Input的所有更改。

Answer 5

为此，我建议避免使用吸气剂，这样就不必进行不必要的重新渲染。

ngOnChanges(changes: SimpleChanges) {
  this.displayName = changes.inputObject.currentValue.name;
}

确保也实现OnChanges接口。