Angular2 final で変更検出を完全に理解しようとしています。
これには以下が含まれます。
- 変化検出戦略への対処
- コンポーネントからの変更検出器の取り付けと取り外し。
私はすでにこれらの概念のかなり明確な概要を理解していると思っていましたが、私の仮定が正しいことを確認するために、それらをテストするための小さな plunkr を書きました。
それについての私の一般的な理解は世界的に正しいですが、状況によっては少し迷子になります.
プランカーは次のとおりです: Angular2 変更検出プレイグラウンド
プランカーの簡単な説明:
ものすごく単純：
- 2 つの子コンポーネントに渡される 1 つの属性を編集できる 1 つの親コンポーネント:
- 変更検出戦略が OnPush に設定されている子
- 変更検出戦略がデフォルトに設定されている子
親属性は、次のいずれかによって子コンポーネントに渡すことができます。
- 属性オブジェクト全体を変更し、新しいものを作成する (「Change obj」ボタン) (OnPush 子の変更検出をトリガーします)
- 属性オブジェクト内のメンバーの変更 ( 「コンテンツの変更」ボタン) (OnPush 子の変更検出をトリガーしません)
子コンポーネントごとに、ChangeDetector をアタッチまたはデタッチできます。( 「detach()」および「reattach()」ボタン)
OnPush の子には、編集可能な追加の内部プロパティがあり、変更検出を明示的に適用できます ( 「detectChanges()」ボタン) 。
説明できない動作が発生するシナリオを次に示します。
シナリオ 1:
- OnPush Children と Default Children の Change Detector をデタッチします(両方のコンポーネントで「 detach() 」をクリックします)。
- 親属性の名と姓を編集します
- 「オブジェクトの変更」をクリックして、変更された属性を子に渡します。
予想される動作:両方の子が更新されないことが予想されます。これは、どちらも変更検出器が切り離されているためです 。
現在の動作: デフォルトの子は更新されませんが、OnPush の子は更新されます..なぜですか? CDが取り外されているため、そうすべきではありません...
シナリオ 2:
- OnPush コンポーネントの CD を切り離す
- 内部値の入力を編集し、[内部の変更] をクリックします。CD が取り外されているため、変更が検出されないため、何も起こりません... OK
- detectChanges()をクリックします。変更が検出され、ビューが更新されます。ここまでは順調ですね。
- もう一度、内部値の入力を編集し、[内部の変更] をクリックします。もう一度、何も起こりません。CD が取り外されているため、変更が検出されないためです.. OK
- 親属性の姓と名を編集します。
- 「オブジェクトの変更」をクリックして、変更された属性を子に渡します。
予想される動作: OnPush の子はまったく更新されません。CD が切り離されているためです...このコンポーネントでは CD はまったく発生しないはずです
現在の動作: 値と内部値の両方が更新され、完全な CD のような継ぎ目がこのコンポーネントに適用されます。
- 最後に、内部値の入力を編集し、内部の変更をクリックします: 変更が検出され、内部値が更新されます...
予想される動作: CD がまだ取り外されているため、内部値は更新されません。
現在の動作: 内部値の変更が検出されました...なぜ?
結論:
これらのテストによると、私は次のように結論付けています。
- OnPush 戦略を持つコンポーネントは、変更検出器が切り離されていても、入力が変更されると「変更が検出されました」となります。
- OnPush 戦略を持つコンポーネントは、入力が変更されるたびに変更検出器が再接続されます...
これらの結論についてどう思いますか。
この動作をより良い方法で説明できますか?
これはバグですか、それとも望ましい動作ですか?