問題タブ [angular2-changedetection]

angular 2 変更検出メカニズムをテストするための簡単なサンプル プロジェクトを作成しようとしています。メイン インデックス ページのスクリプト タグに純粋な JavaScript オブジェクトを作成します。次のものが含まれます。

ログをコンソールに出力する関数と、テキスト プロパティを変更する関数です。

Angular 2 では、コードは次のようになります。

私がやろうとしているのはこれです: 関数 Tryout.printme() を onclick で通常呼び出すと (完全に角度の外側)、角度が変更を検出して画面を更新するようにします。

私はこの点に成功しました: コンポーネントから Tryout.printme() を呼び出すと (changeme() 関数が Tryout.printme() を呼び出しています)、Angular は変更を検出し、UI を更新しますが、これは問題ありません。また、角度の外から変更し、Angular から consoleLogMe() を呼び出すと、変更されたテキストがログに記録され、UI が更新されます。

Angular が何らかの形で実行されているのと同じ Zone で Tryout.changeme() を実行する必要があると思います。何か案は？私は純粋な javascript/jquery で行われる大きなプロジェクトを持っていますが、モデルに触れずに (まだ) ハンドルバー テンプレートを angular2 コンポーネントにゆっくりと書き直す必要があります。そのためには、モデルを angular と同じゾーンで強制的に実行する必要があります。

Angular 1 でこのようなことをしたい場合は、$scope.$apply でうまくいきます。

例の gif を次に示します。

$watchAngularJS では、 の関数を使用してスコープ変数の変更を監視するウォッチャーを指定できました$scope。Angular で変数の変更 (たとえば、コンポーネント変数) を監視することと同等のものは何ですか?

プロパティを持つ Angular コンポーネントを作成していますMode(): string。

イベントに応答するのではなく、プログラムでこのプロパティを設定できるようにしたいと考えています。

問題は、ブラウザー イベントがない場合、テンプレート バインディング{{Mode}}が更新されないことです。

この変更検出を手動でトリガーする方法はありますか?

asyncパイプを利用するAngular 2コンポーネントのストリームを介して、ウィンドウのサイズ変更時にウィンドウサイズをレンダリングしようとしています:

<h2>Size: {{size$ | async | json}}</h2>

ただし、コンポーネントは初期状態のみをレンダリングし、ストリームの更新を無視します。コンソールを開くと、ウィンドウのサイズ変更時に、同じストリームからの更新が表示されます。

ここで何が欠けているのか理解できません。

ここにプランカーがあります

私は単純な Attribute Directivemaskを持っています。@Input() mask:string

maskどうにか使えるバインディングの変化を察知して反応できるようにしたいのですがngOnChanges、これは大きなブラシで問題を描くような気がします

ディレクティブのサンプル/簡易コード:

使用法：

の値がsomeBinding変化したときに、に依存せずにコードを実行するにはどうすればよいngChangesですか?

Dart で記述された私の Angular2 アプリには、ビュー内で必ずしも特定の関係を持たないコンポーネント間で共有されるデータを追跡するサービスがいくつかあります。任意のコンポーネントによって開始された更新がすべてのコンポーネントの表示に反映されるようにする必要がある、OnPush変更検出のパフォーマンス上の利点が必要である、コンポーネントが作成される前に設定された可能性のある値を表示するコンポーネントが必要である、これらすべてを達成したい最小限のボイラープレートで。

私の調査によると、Observables が必要なものである可能性がありますが、いくつかの点で明確な答えを見つけることができませんでした。

Angular2 でうまく動作する Dart の Observable の実装はありますか?

Observable は Dart Stream と意味のある違いがありますか? 特に、Observable は将来の更新について通知されるだけでなく、現在の値を取得することをサポートしていますか?

最後になりましたが、Observable が私の要件を満たしていると仮定すると、コンポーネントの Observable String プロパティを宣言し、注入されたサービスから取得した Observable で初期化し、その値をコンポーネントのテンプレートに表示するための最小限の構文は何でしょうか (pre で始まる) -既存の値)、およびその値を更新すると、プッシュ変更検出用にコンポーネントが自動的にマークされますか?

Observable がこれで機能しない場合、他にどのようにすればよいですか? 私の現在のアイデアはStream、新しいリスナーが受け取る他の何よりも先に最新の値を挿入するカスタム サブクラスを使用し、それをasyncパイプ経由で送信して、ストリームからの値の抽出と変更検出のマーキングを処理することです。

私の理想的なソリューションは、次のようになります。

そしてテンプレートでは：

または本当に理想的ですが、これはAngularのテンプレートコンパイルに何らかの形でフックする必要があります(おそらくトランスフォーマーを使用しますか?私はそれらがどのように機能するかをまだ知りません):

そしてそれだけで、それはうまくいくでしょう。

私が現在取り組んでいるカスタム ソリューションは、それほど便利ではありませんが、それに近いものです。

おそらく、変更検出に関するAngular2の概念が欠けています。

NgZones と ChangeDetectionStrategy について読んだことがありますが、問題を解決できるものはありませんでした。

Observables を保存して一部のコンポーネントでそれらを消費する外部モジュールがある場合、コンポーネントの 1 つがサービスに何かを変更すると、それが他のコンポーネントに伝播します。

問題を表現するのに役立つPlunkerを書きました

http://plnkr.co/edit/ieHnm0ikBe4BR5w6O1XE?p=preview

そこには、を使用して一定のデータ変更をsrc/MyService.tsシミュレートする場所があります。SubjectsetInterval

はSubjectで消費され、src/app.tsその値は空のクリック ハンドラーでボタンをクリックしたときにのみレンダリングされます。

src/MyService.ts

src/app.ts

これは、Angular 2 の変更検出がどのように機能するかについての私自身の誤解かもしれませんが、コンポーネントが、またはChangeDetectionStrategyに設定されている場合、そのコンポーネントは、コンポーネントがインスタンス化されたときに一度だけ変更をチェックすることを期待していました。そのようには起こらないようです。CheckedCheckOnceDetached

クリックすると、hasThingプロパティが切り替わると思っていましたが、ビューが更新されるとは思っていませんでした。たまたま、ビューが更新されます。ChangeDetectionStrategyもに設定されている場合に発生しDetachedます。

http://plnkr.co/edit/2hHdt2BDpj419Z32iPjJ?p=preview

ここで何が欠けていますか？ビューが更新される正確な原因は何ですか? hasThingプロパティを更新するかどうかに関係なく、値が変更されたかどうかに関係なく、クリックするとビューが更新されます。