問題タブ [angular-changedetection]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
8702 参照

angular - ディレクティブでのAngular 5リアルタイム変更検出

Angular の Change Detection がどのように機能するか、@Inputプロパティの変更を検出するために OnChanges フックを使用する方法、およびディレクティブやコンポーネントなどで ngModel valueChanges をサブスクライブする方法について、私はかなりの情報を得ています。

ここで何が起こっているのか誰でも説明できますか:

# カスタム ディレクティブ:

@Input() プロパティ ngModel を持つカスタム ディレクティブ myNumber があるとします。

  • 上記の例では、サブスクリプションを@Inputプロパティ ngModel とディレクティブのモデル オブジェクトの変更に設定しました。モデル値が変更された場合、変更はコンソールに記録される必要があります。

# コンポーネントのテンプレート:

  • 3 つの入力要素に myNumber ディレクティブを適用し、各入力要素には ngModel: number1、number2、number3 があります。

  • 最後の入力には、calculate() メソッドを呼び出すぼかしイベントがあります。

# コンポーネントの typescript:

  • モデルが変更されるたびに、calculate() メソッドでメッセージをログに記録しました。
  • ディレクティブは ngModel の変更をリッスンしており、モデル値の変更ごとに 2 つのメッセージもログに記録します。

# 問題:

Angular はcalculate()メソッドを実行し、3 つのモデルすべてを変更してから、変更を検出し、ディレクティブで cd フックをトリガーします。

# 簡単にしたい解決策:

コンポーネントchangeDetection()では、メソッドでモデルが変更されるたびに呼び出すことができますcalculate()。これにより、ディレクティブの変更検出フックが自動的にトリガーされます。

  • このように angular はモデルを変更し、ディレクティブ内の変更検出フックをすぐに呼び出します。

# 質問:

ref.detectChanges()これをすぐに達成し、各モデルの変更後に手動で書き込むことなく検出を変更するにはどうすればよいですか?

この例が、同じ問題を抱えているすべての人に役立つことを願っています