問題タブ [angular2-changedetection]

私はデータ テーブル コンポーネント ( angular2-data-table ) プロジェクトを持っており、プロジェクトを Angular の従来の変更検出からOnPush最適化されたレンダリング速度に変更しました。

新しい変更検出戦略が実装されると、オブジェクトのプロパティの更新など、データ オブジェクトが変更されたときにテーブルが更新されないことを参照するバグが報告されました。 255 . インライン編集や、株価情報などの大規模なデータ コレクション内の 1 つのプロパティに対する外部データの変更など、この種のニーズに対して強力なユース ケースを作成できます。

この問題を解決するために、 というカスタム trackBy プロパティ チェッカーを追加しましたtrackByProp。参考：コミット。残念ながら、このソリューションでは問題は解決しませんでした。

ライブ リロードの下のデモ ページでは、上記のコミットで参照されているデモが実行されていることを確認できますが、クリックするまでテーブルは更新されず、変更検出がトリガーされます。

コンポーネントの構造は次のようなものです。

Table > Body > Row Group > Row > Cell

これらのコンポーネントはすべて実装されてOnPushいます。ここに示すように、行セッターでゲッター/セッターを使用してページの再計算をトリガーしています。

このパターンを実装する人のために変更検出を続けたいと思いますがOnPush、複数のコンシューマーを含むオープンソース プロジェクトとして、画面に表示される行の値に対する何らかのカスタム チェック機能について議論することができます。

とは言っても、trackBy行セル値の変更検出をトリガーしていません。これを達成するための最良の方法は何ですか?

こんにちは、Angular2 でアプリケーションを開発しています。HTMLテーブルに表示する必要がある多次元リストをAPI経由で受け取ります。

これは、API から受け取る json の簡略化されたバージョンです。

次のように表示するときに、コンポーネントを分離しようとしました。

ListComponent :

EventComponent: (イベント ビュー セレクター)

SubEventComponent: (サブイベント ビュー セレクター)

EventActionComponent: (イベント アクション セレクター)

私のすべてのコンポーネントはchangeDetectionを使用しています：ChangeDetectionStrategy.OnPush

アクションをクリックすると、Angular 2 はリスト全体ではなく、クリックされたボタンのみを再チェックします。

今のところ、Angular はリストのチェック + すべてのイベントの 1 つのチェック + すべてのサブイベントの 1 つ + すべてのアクションの 1 つを行います ...

ChangeDetectorRef.detach を使用してみましたが、何も変わりません。

私のルート リストイベントは ImmutableJS で作成されます。

ツリー全体を再チェックせずに、1 つの子コンポーネントのみをチェックするように angular に指示する方法はありますか?

前もって感謝します ;）

これには合理的な説明があると確信していますが、なぜオブジェクトのプロパティがビューで更新されるのに、プリミティブ型の変数は更新されないのか、本当に困惑しています。ngrx/store のオブザーバブルを使用しているため、それが原因である可能性がありますが、他の非同期の状況でこれを見たような気がするので、理解しようとしています。

たとえば、次のテンプレートがあります。

次に、コンポーネントの TypeScript クラスには、次のようなものがあります。

画面を見ると、dataCounter 変数を表すテキストは更新されていませんが、data.counter を表すテキストは更新されています。zone.js を強制的に実行するための追加のブロックでさえ、役に立ちません。dataCounter は引き続き元のテキストを表示します (注意: 実際には、dataCounter は初期状態の値を取得しますが、後でサブスクライブが開始されたときに値が更新されることはありません。data.counter のテキストは常に更新されます)。誰かがこれを説明できますか？

ここに、私が説明している状況の plunkr があります: https://plnkr.co/edit/gEeAKK31Yo6kATjFQY08?p=templates

OnPush 変更検出戦略で定義されたコンポーネントを含むブランチ内で、デフォルトの変更検出戦略を使用してコンポーネントを使用することは許容されますか?

OnPush であるコンポーネントの階層を持つ OnPush コンポーネントがあると仮定しましょう。ただし、再利用可能なコンポーネントを追加する必要があります。これは、たとえば現在の時刻をこの階層の最下部のどこかに表示します。

時間コンポーネントを機能させるには、その中で changeDetectionRef.markForCheck を使用する必要があります。これにより、angular がこのコンポーネントのすべての祖先を実際にチェックするようになります。

それを行うのは良い習慣ですか？それを回避する方法はありますか？

時間変更ロジックを最上位コンポーネントに移動し、現在の時間値を渡すことができることは理解していますが、このコンポーネントは再利用可能であり、このロジックをいくつかの場所で複製する必要があるため、そうしたくありません。また、トップコンポーネントからこれまでの道のりは大きすぎます。

からsubscribesへのコンポーネントがあります。がその値を発行すると、コンポーネントで何らかの変更が発生します。奇妙なことに、値がどのように生成されたかに応じて、コンポーネントがビューを更新する場合としない場合があります。私がこれを正しく理解している場合、いくつかのイベントは、変更検出をトリガーするためにangular 2によってモンキーパッチが適用されており、一部のイベントはそうではありません。MIDI イベントは、そうでないイベントの 1 つです (これはちょっと意味があります)。Observableserviceobservablenextnext

サービスが次の値をトリガーするためにクリック イベントを探す場合、変更がビューに反映されます。そのため、変更検出が行われます。

サービスがキーボード イベントを同じように検索すると、変更検出が行われます。

ただし、サービスが MIDI イベントを使用する場合、変化の検出は行われません。

ここにいくつかのコード：

そして、ここに plnkr があります:

https://plnkr.co/edit/SS6jwgQg4TVdOCC05cNV?p=preview

これがバグなのか、angular 2 の基礎となる機能の機能なのかはわかりません。いずれにせよ、なぜこれが起こるのか知りたいです。具体的な問題は、変更検出を自分で呼び出すことで簡単に解決できるため、解決策は必要ありません。