問題タブ [angular2-changedetection]

(click)変更検出をトリガーせずに、Angular 2のイベント コールバック関数内でいくつかのロジックを実行しようとすると、大きな問題が発生します。

変更検出をトリガーしたくない理由

コールバック関数は、上への単純なアニメーション スクロールを実行します。他のコンポーネントには影響を与えないため、すべてのコンポーネントで変更検出を起動する必要はありません。実際、起動させたくありません! 変更検出はすべてのコンポーネントで実行されるため、モバイルでのアニメーションのパフォーマンスは非常に低くなります。

私が試したこと

を使用してゾーン外でコードを実行できることを知っています

clickこれは、ゾーンの外で実行したいコードが、keyup、keydownイベントなどによって呼び出されない場合にうまく機能します。

私のコンポーネントは次のように見えるので...

<button (click)="doThing()">Do that thing outside the zone!</button>

...myFunctionゾーン外で実行されますが、clickイベントは変更検出をトリガーします。

OnPush可能な限り多くのコンポーネントに変更検出戦略を既に実装しています。

ここで変更検出がトリガーされないことが重要ですが、それを防ぐ方法が見つかりません。

編集すべてのコンポーネントで変更検出が設定されて いるこのplnkを参照してください。OnPushsubrow コンポーネント ボタンをクリックすると、subrow、row、および app コンポーネントで CD がトリガーされます。

これは私をかなり混乱させます。サブスクリプションのしくみをしっかりと理解していない可能性があります。

Angular 2 の最終版

目標: ロールに基づいてナビゲーション メニューを非表示/表示するアプローチ: Facebook を使用してユーザーを認証します。認証後、ユーザーの役割が取得され、管理メニューを表示するかどうかを決定するために使用されます。observable.next 呼び出しが true で行われ、ナビゲーション バー コンポーネントのサブスクリプションがフラグを取得し、isAdmin を true に変更します (isAdmin は最初は false)。これにより、管理メニューを表示できるようになります。

問題: true フラグがサブスクライバーによって適切に取得され、isAdmin が true に設定されます。ただし、管理者メニューは表示されません。

navbar.component.ts

navbar.html

app.component.ts

security.service.ts

これに何か問題がありますか？または、目標を達成するためのより良いアプローチがありますか? どんな提案でも大歓迎です！ありがとう

アップデート

peeskilet から提供された回答で、コンポーネントから changeDetection 行を削除したところ、機能しました。

ただし、コードをさらに作業すると、移動します

別のサービス (この場合は Facebook サービス) に接続し、アプリ コンポーネントからそのサービスを呼び出します。navbar.compoenent.ts のサブスクライブは変更を取得しますが、変更検出をトリガーしませんでした。検出を機能させるには、手動で検出をトリガーする必要があります。

更新された navbar.component.ts

更新された app.component.ts

これはかなり興味深いです。どうやら、angular 2 変更検出についてもっと学ぶ必要があります。どなたか良い参考書をご存知でしたら教えてください。

ありがとうございました！！

に公開したパブリック メソッドがありwindowます。このメソッドは と対話しComponent、テンプレートで監視している変数を変更します。しかし、値を変更すると、*ngIf()トリガーされません。

app.component

公共サービス

LayoutManagerComponent

したがって、ビューが最初に読み込まれるとき、ビューは空白です。次に、入力すると変数がangular.methods.CallMe()変更され、コンポーネントのhtmlが表示されます。コンソール機能が正常に呼び出された場合、ビューだけが変更されません。viewpage1renderView

----更新 - まだ動作していません -------

での変更検出の実装方法を見ると、が切り離されていると実行されないようです (ここでも確認されていAsyncPipeます)。this._ref.markForCheck()ChangeDetectorRef

これの動機は、変更検出がいつ発生するかを完全に制御することObservableです (MVVM パターンに類似したものを排他的に使用することにより)。入力を完全に制御できる非常にパフォーマンスに敏感なコードに取り組んでいChangeDetectionStrategy.OnPushますが、入力の変更だけでなく、イベントの発生 (クリックイベントなど) も制御します。クリックするたびにスイープします。

ChangeDetectorRefそのため、完全に切り離すことを選択しましたが、今では機能しなくなりAsyncPipeました。

これは の予想される動作AsyncPipeですか? もしそうなら、これを回避する方法はありますか？あるいは、ChangeDetectorStrategy.OnPushコントロール イベントの発火時に発火しないようにする方法はありますか?

私は Angular 2 の変更検出に関する情報が山ほどあることを知っており、それを理解するために最善を尽くしてきました。私の問題は、配列の可変性プロパティと関係があるのではないかと思いましたが、よくわかりません。これらの「バケット」が Firebase から入ってくるので、それらを配列にプッシュし、それを子コンポーネントに渡します。これはすべて機能し、配列はすぐにいっぱいになりますが、ページに表示されるまで数秒かかります。(ただし、いくつかの setIntervals と setTimeouts を追加しようとすると、はるかに迅速に動作しますが、そのような明確な解決策がない限り、そのハックを実行したくありません。) 舞台裏で何が起こっているのかを十分に理解している人はいますか?簡単に説明して助けてくれませんか？ありがとう！

レンダラー プロセスで angular 2 を使用して電子アプリを構築しています。メイン プロセスはソケット サーバーと通信します。ユーザーがこのサーバーに接続するか切断するたびに、ユーザーのステータスをビューに表示したいと考えています。

このために、次のように、electron の ipc を使用して、メインからレンダラー プロセスにメッセージを送信します。

私の見解では、次のような（簡略化された）角度コンポーネントがあります

メインプロセスからのメッセージを正常にログに記録しました。

問題は、角度 2 が電子の ipc を「認識」していないため、変更検出がトリガーされないことですstatus。この問題に苦しんでいる人を何人か見てきましたが、「真の」解決策に出くわしていません。

ApplicationRef、ChangeDetectorRefおよびngZone(参照:手動で Angular2 変更検出をトリガーする )を注入して解決しようとしましたが、提供された方法 ( tick()、detectChanges()、run()それぞれ) のいずれもたまたま解決策を提供しませんでした。

どうやら、ipc.onエラーが発生したため、「内部」でクラスのプロパティ/メソッド/インジェクタブルを参照できません。 -component.ts ) ソリューション (あまりエレガントではないと思います) の結果はUncaught TypeError: Cannot read property 'markForCheck' of undefined.

私の場合、変更検出を機能させる方法を教えてください。

編集（ハック）：

私が見つけた1つの方法で、少なくとも必要な/欲しい機能を取得できます:

status-bar.component.ts:

socket-status.service.ts:

これは機能しますが、この動作を実現するためのよりエレガントな方法が必要であると感じています。

ただし、最良のシナリオは、コンポーネントのクラス プロパティを ipc コールバックで直接設定し、変更検出をトリガーする手段です...これまでのところ、それを機能させることができなかったので、助けていただければ幸いです。

(psまた、手動でトリガーする必要がある理由がわかりませんthis.ref.tick()。これは、Angular 2の以前のベータ版でストリームから変更検出をトリガーするために実行しなければならなかったことを覚えているものではありません...)

Angular2 final で変更検出を完全に理解しようとしています。

これには以下が含まれます。

• 変化検出戦略への対処
• コンポーネントからの変更検出器の取り付けと取り外し。

私はすでにこれらの概念のかなり明確な概要を理解していると思っていましたが、私の仮定が正しいことを確認するために、それらをテストするための小さな plunkr を書きました。

それについての私の一般的な理解は世界的に正しいですが、状況によっては少し迷子になります.

プランカーは次のとおりです: Angular2 変更検出プレイグラウンド

プランカーの簡単な説明:

ものすごく単純：

• 2 つの子コンポーネントに渡される 1 つの属性を編集できる 1 つの親コンポーネント:
• 変更検出戦略が OnPush に設定されている子
• 変更検出戦略がデフォルトに設定されている子

親属性は、次のいずれかによって子コンポーネントに渡すことができます。

• 属性オブジェクト全体を変更し、新しいものを作成する (「Change obj」ボタン) (OnPush 子の変更検出をトリガーします)
• 属性オブジェクト内のメンバーの変更 ( 「コンテンツの変更」ボタン) (OnPush 子の変更検出をトリガーしません)

子コンポーネントごとに、ChangeDetector をアタッチまたはデタッチできます。( 「detach()」および「reattach()」ボタン)

OnPush の子には、編集可能な追加の内部プロパティがあり、変更検出を明示的に適用できます ( 「detectChanges()」ボタン) 。

説明できない動作が発生するシナリオを次に示します。

シナリオ 1:

1. OnPush Children と Default Children の Change Detector をデタッチします(両方のコンポーネントで「 detach() 」をクリックします)。
2. 親属性の名と姓を編集します
3. 「オブジェクトの変更」をクリックして、変更された属性を子に渡します。

予想される動作:両方の子が更新されないことが予想されます。これは、どちらも変更検出器が切り離されているためです 。

現在の動作: デフォルトの子は更新されませんが、OnPush の子は更新されます..なぜですか? CDが取り外されているため、そうすべきではありません...

シナリオ 2:

1. OnPush コンポーネントの CD を切り離す
2. 内部値の入力を編集し、[内部の変更] をクリックします。CD が取り外されているため、変更が検出されないため、何も起こりません... OK
3. detectChanges()をクリックします。変更が検出され、ビューが更新されます。ここまでは順調ですね。
4. もう一度、内部値の入力を編集し、[内部の変更] をクリックします。もう一度、何も起こりません。CD が取り外されているため、変更が検出されないためです.. OK
5. 親属性の姓と名を編集します。
6. 「オブジェクトの変更」をクリックして、変更された属性を子に渡します。

予想される動作: OnPush の子はまったく更新されません。CD が切り離されているためです...このコンポーネントでは CD はまったく発生しないはずです

現在の動作: 値と内部値の両方が更新され、完全な CD のような継ぎ目がこのコンポーネントに適用されます。

6. 最後に、内部値の入力を編集し、内部の変更をクリックします: 変更が検出され、内部値が更新されます...

予想される動作: CD がまだ取り外されているため、内部値は更新されません。

現在の動作: 内部値の変更が検出されました...なぜ?

結論:

これらのテストによると、私は次のように結論付けています。

• OnPush 戦略を持つコンポーネントは、変更検出器が切り離されていても、入力が変更されると「変更が検出されました」となります。
• OnPush 戦略を持つコンポーネントは、入力が変更されるたびに変更検出器が再接続されます...

これらの結論についてどう思いますか。

この動作をより良い方法で説明できますか?

これはバグですか、それとも望ましい動作ですか?