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。

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

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

Answer 1

displayName 的 getter 会更容易。

@Input() inputObject;

ngOnInit() {

}

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

...

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