角4 @Inputプロパティの更新はUIに影響しません

Question

parentComponentとChildComponentの2つのコンポーネントがあります。これは親の内部で定義されています。 parentComponentには、（getterを使用して）ChildComponentの入力プロパティに渡す値として使用されるローカル変数があります。

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; 
    } 

これはありません新しい人名で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... 

}