問題タブ [angular2-changedetection]

私は、チャット表示用の単純な自動スクロール ディレクティブに取り組んできました。

このディレクティブは、設定したenableProdMode()場合ChangeDetectionStrategyとデフォルトに設定されている場合に機能しますが、「開発モード」では例外が発生します。ChangeDetectionStrategyをに設定できますonPush。その場合、例外は発生しませんが、スクロールは遅れます。

Dom が更新されてから Scroll 関数を呼び出すことができるように、このコードをより適切に構造化する方法はありますか? 試してみましsetTimeout()たが、遅延が悪化ChangeDetectorRefし、オブザーバブルを使用してトリガーしてサブスクライブしようとしましたmarkForCheck()。を使用するngAfterViewChecked()と、ブラウザがクラッシュします。

これは、dev モードのときにトリガーされる例外です。

例外: 式 'this.scrollHeight in ChatDisplay@1:40' は、チェック後に変更されました。以前の値: '417'。現在の値: [ChatDisplay@1:40 の this.scrollHeight] angular2.dev.js の '420' (23083,9)

変更検出について簡単な質問があります。

内部にブール値を持つコンポーネントと（グローバル）サービスがあります。コンポーネントがそのブール値をリッスンし、そのブール値が変更された場合に関数を実行するにはどうすればよいですか?

ありがとう！

次のように共有サービスを作成した親コンポーネントからルートコンポーネントへのGoogleマップの値を取得しようとしています

親から、値の変更時にこのアドレスをブロードキャストし、サブスクライブして子で受信します。子ページが親でレンダリングされる場合にのみ、すべてが機能します。親が最初にレンダリングされた場合、ルーティングを介して子ビューを呼び出すと、ページがレンダリングされたときに開始時にデータが表示されず、親の値を再度変更した場合にのみ表示されます。子ビューはサービスにサブスクライブしていますが、レンダリング時にデータを取得していません。親またはビューからの説明またはコードがさらに必要な場合は、お知らせください。誰かがこれについて私を助けてくれることを願っています。

アップデート

これは更新であるため、Google マップ API から値を取得しているアプリ コンポーネントの問題を理解できます

後で、この値を取得する子ビューがあります

しかし、このビューがレンダリングされたときに地理位置情報を取得できず、親のテキストボックスの値を変更すると、ビューで更新されます

次のように共有サービスを構築しようとしています

基本的に BehaviourSubject を実装する方法がわかりません。基本的にここで試しているのは単なる混乱であり、子コンポーネントでこの値を使用して呼び出しています

これは .single()/last() などのエラーをスローしています 利用可能なものはすべて関数ではないので、例を検索したときに実際にどのように機能し、どのように実装するかを誰かが教えてくれますが、私には意味がありません。

変更検出に関する多くの記事を読みましたが、それがどのように機能し、ビューをレンダリングするのか明確に理解できませんでした。反応のように、dom パッチを作成することによって変更された UI の一部のみをレンダリングする仮想 dom および diff アルゴリズムがあります。

変更検出は、ビューでレンダリング/置換される変更をどのように決定しますか?

私はかなり基本的な JS で作成された非角度ページを持っており、いくつかの Angular2 を学習して追加し、それをいくつかの新しい機能に使用することは素晴らしいアイデアだと思いました。

私の計画は、古いコードによって更新されるオブジェクトに Angular2 コンポーネントをバインドし、Angular2 マジックを使用して UI のチャンクを更新することでした。

問題は、外部 JS で行われた変更に対応するように Angular2 を説得できないことです。それを行うためのトリックは何ですか？問題をグーグルで検索しようとすると、Angular2 の変更検出プロセスの詳細な説明につながりますが、これまでのところ役に立ちませんでした。これはただのひどい考えですか？

ランダムな Angular2 jsfiddle を見つけ、それをハッキングして問題を示しました。文字列は「window.names」に追加されますが、角度側から追加されるまで表示されません: https://jsfiddle.net/byfo3jg3/。コードは次のとおりです。

divレイアウトに Bootstrap を使用しており、たとえば幅 = 25% などのブートストラップを使用して自動計算されたサイズが変更されているかどうかを確認する必要があります。

テンプレートに設定していないが、Bootstrap によって設定されている属性に対して変更検出を実行するにはどうすればよいですか?

(window:resize)十分ではありません。

次のコードを検討してください

私が行った実験から、現在のAngular2変更検出戦略についての私の理解は次のとおりです。誰かがそれが本当かどうかを確認できますか?

1. Angular2 はデフォルトで、変更検出を行うときに値が等しいかどうかをチェックします。が存在しない場合ChangeDetectionStrategy.OnPush、コンポーネント ツリー内の監視対象のすべての変数の値が等しいかどうかがチェックされます。値が等しい場合、その特定のコンポーネントは再レンダリングされ、値が等しい場合、その特定のコンポーネントは再レンダリングされません。

2. ChangeDetectionStrategy.OnPushコンポーネントに追加する場合。以下のように動作が変化します

   私。コンポーネント内の変数に参照変更がある場合、コンポーネントが再レンダリングされ、子コンポーネントの変更検出がチェックされます (特定の変更検出アルゴリズムの値/参照チェックは に依存しますChangeDetectionStrategy.OnPush) 。

   ii. コンポーネント内の変数に参照の変更がない場合、コンポーネントは再レンダリングされず、子コンポーネントの変更検出はチェックされません。ChangeDetectionStrategy.OnPush

これは正しい解釈ですか？