Angular 4 @Input属性更新不会影响UI

Question

有两个组件：parentComponent和ChildComponent，它在父级中定义。 在parentComponent中有一个局部变量，它用作传递给ChildComponent的输入属性的值（使用getter）。

ParentComponent.ts：

@Component({ 
selector:'parent-component', 
template:` 
<h1>parent component</h1> 
<child-component [personData]="PersonData"></child-component> 
` 
}) 
export class ParentComponent{ 
personData:Person; 

get PersonData():Person{ 
return this.personData; 
} 

set PersonData(person:Person){ 
this.personData = person; 
} 

ngOnInit(){ 
this.PersonData = new Person(); 
this.PersonData.firstName = "David"; 
} 

//more code here... 

} 

ChildComponent.ts：

@Component({ 
    selector:'child-component', 
    template:` 
    <h1>child component</h1> 
    <div *ngIf="personData">{{personData.firstName}}</div> 
    ` 
    }) 
export class ChildComponent{ 
    @Input() personData:Person;   

    //more code here... 

} 

的问题是：在父组件的一些地方中，当特定事件发生时，函数newPersonArrived（newPerson：PersonData ）被调用，功能代码如下：

newPersonArrived(newPerson:Person){ 
    this.PersonData = newPerson; 
    } 

This does not aff用新的人物名称来使用UI！

只有以下帮助：

newPersonArrived(newPerson:Person){ 
    this.PersonData = new Person(); 
    this.PersonData.firstName = newPerson.firstName; 
    } 

这是预期的行为？

为什么只有当personData初始化为新的Person时，UI才会“捕捉”这个变化？

Answer 1

请留意在子组件更改

import { Component, Input, Output, OnChanges, EventEmitter, SimpleChanges } from '@angular/core'; 

@Component({ 
    selector:'child-component', 
    template:` 
    <h1>child component</h1> 
    <div *ngIf="personData">{{personData.firstName}}</div> 
    ` 
    }) 
export class ChildComponent implements OnChanges{ 
    @Input() personData:Person; 
    public ngOnChanges(changes: SimpleChanges) { 
      if ('personData' in changes) { 
       //some code here 
      } 
     }  

    //more code here... 

}