2016-05-19 21 views
0

これは簡単な説明がありますので、私の無知を許してください。親コンポーネント内の配列は、angular2の子コンポーネントから割り当てることができません

子コンポーネントからの配列での作業と、それは、親配列の値がうまく持続渡された値に、.pop().splice().push()を使用して、私は値(=)を割り当てるしようとすると、それはで配列を保持されません。親コンポーネント

私はsimple example on Plunkerを作成しました。

プログラムには、クリア、ポップ、リロードの3つのボタンがあります。

クリアリスト - @Input listを空の配列(this.list = [])に割り当てます。親コンポーネントのカウンタは変更されません。

Pop - リストに.pop()を実行します。親コンポーネントのカウンタが変化することに注意してください。

どのようにして配列の値を割り当てるだけでいいのですか?

私はEventEmitterを使用して、親が イベントを監視し、そのように更新することができます知っています。この シナリオを理解しようとしていて、余分なコードを避けることができるかどうかを確認しようとしています。

+1

'list'はメモリ' 0x123'を指しています。 'pop'メソッドはメモリアドレス' 0x123'上の配列を変更するため、変更は親と子の両方に反映されます。 clearメソッドは子コンポーネントの 'list'プロパティを' 0x321'に割り当て、親コンポーネントの 'list'プロパティは' 0x123'をポイントし、そのメモリアドレスには何も変化はありません。 – tchelidze

+2

解決策。 'this.list.length = 0;'しかし、2つのウィジェットが同じデータを操作することは、あなたのロジックをフォローするのが難しいことを理解する必要があります。そのため、reduxのようなフレームワークがあるので、データは一方向に流れ、他の方法での更新は一貫性のある、デバッグ可能な方法で起こります。中間のアプローチでは、子ウィジェットからイベントとイベントを発行し、親ウィジェットがそのイベントに応答してリストを更新するようにしています –

+0

説明のための素晴らしいお礼 – mrcolombo

答えて

1

親と子は、どちらも同じ/ 1つの配列オブジェクトへの参照を持っています。したがって、配列の要素を変更する(配列要素を変更する、要素を追加する、または要素を削除する)場合、親と子の両方は、同じ/ 1つのオブジェクトに対して変更が行われているため変更を参照します。

親に新しい配列を代入すると、角の変化の検出は、子の入力プロパティであるため、新しい配列参照を子に伝播します。

ただし、子に新しい配列を割り当てると、親には元の配列への参照が残っています。角度変化の検出はここでは役に立ちません。たとえば、EventEmitterを使用して、この新しい配列について親に通知する必要があります。

関連する問題