質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

0回答

1559閲覧

Angular2において、親componentからデータを変更するときのベストプラクティス

YuutaMoriyama

総合スコア6

0グッド

0クリップ

投稿2017/01/29 09:02

編集2022/01/12 10:55

###前提・実現したいこと

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()が呼ばれないという現象になっております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問