###前提・実現したいこと
angular2のcomponent interactionにおいて、親componentから子componentにデータが反映されるときに、どのような規則性があるのかを明確にしりたい。
###該当のソースコード
親component
https://github.com/morninng/todo/blob/master/src/app/array-todo/todos/todos.component.ts
TodoData :TODO[]= [ {content: "aaa", status:false}, {content: "bbb", status:false}, {content: "ccc", status:false}, ] onChecked(data){ const updated_todo = {content:this.TodoData[data.index].content, status: data.status}; this.TodoData[data.index] = updated_todo; } onChecked2(data){ this.TodoData[data.index].status = data.status; }
https://github.com/morninng/todo/blob/master/src/app/array-todo/todos/todos.component.html
<span *ngFor="let todo of TodoData; let i = index;"> <app-todo [todo]="todo" [index]="i" (onChecked)="onChecked($event)" (onChecked2)="onChecked2($event)"></app-todo> </span>
子component
https://github.com/morninng/todo/blob/master/src/app/array-todo/todo/todo.component.ts
ngOnInit() { console.log("ngOnInit - index", this.index) } ngOnChanges(){ console.log("ngonchanges index:" + this.index) } done(){ this.onChecked.emit( {index:this.index,status:!this.todo.status}); } done2(){ this.onChecked2.emit( {index:this.index,status:!this.todo.status}); } ngOnDestroy(){ console.log("ngonDestroy - index:" + this.index) }
https://github.com/morninng/todo/blob/master/src/app/array-todo/todo/todo.component.html
<span [ngClass]="{'fontdone':todo.status}"> {{todo.content}}</span> <button (click)="done()">done</button> <button (click)="done2()">done2</button>
###発生している現象
(1)onCheckedを実行したとき
onChecked(data){
const updated_todo = {content:this.TodoData[data.index].content, status: data.status};
this.TodoData[data.index] = updated_todo;
}
こちらを実行したときのconsole出力
ngonDestroy - index:1 - status : false TodoComponent ngonchanges - index:1 - status : true TodoComponent ngOnInit - index 1
component自体が、元のものが削除され、新規で追加される。
(2)onChecked2を実行したとき
onChecked2(data){
this.TodoData[data.index].status = data.status;
}
ngOnChangesはよばれず、console出力はないが、表示じたいは更新されている。
###質問
親componentからデータを変更するときのベストプラクティスがしりたいです。
component自体は新規作成されずに、データ変更のみがされ、
ngOnChangesのみがよばれ、component自体は新規で作成されないのがいいかとおもっているのですが、
上記のケースだと、(1)はcomponentが新規で作成されてしまい、(2)だとviewのデータ自体は変更されていますが、ngOnChanges()が呼ばれないという現象になっております。
あなたの回答
tips
プレビュー