問題タブ [angular2-changedetection]

パフォーマンス上の理由から、コンポーネントに手動の変更検出を設定しようとしています。

アプリの構造: アプリ -> 本 -> ページ

AppComponent でオブザーバブルをサブスクライブし、ChangeDetectorRef の「markForCheck」メソッドを実行します。

これにより、BookComponent (更新用にマークしたコンポーネントの子) で ngAfterContentChecked メソッドがトリガーされるようです。

これにより、親コンポーネントの「markForCheck」もすべての子を更新すると信じていました。

しかし、ngAfterContentChecked が子 (BookComponent) で実行されても、このコンポーネントのテンプレートは更新されません!

すべての子 (コンポーネント階層の数レベルの深さの場合もあります) で観察対象をリッスンすることになっていますか? それとも私は何か間違ったことをしましたか？また、テンプレートが更新されないのに、なぜ ngAfterContentChecked が子コンポーネントで実行されるのでしょうか?

関連するコードの一部。

次のような配列があります。

マーカーをクリックすると、選択したマーカーの情報を含むセクションが開きます。

googlemaps の html は次のとおりです。

関数 updateDiv() は次のとおりです。

これは、idを表示したいdivのマークアップですlocations

しかし、うまくいかないようです！

Angular 2 の変更検出は単方向であり、コンポーネント ツリーの上から下に向かっており、1 回のパスで安定すること、つまり複数の変更検出サイクルがないことを読みました。これらの仮定を考えると、相互に依存するプロパティを持つ親コンポーネントと子コンポーネントがある状況ではどうなるでしょうか? 例：

1. ユーザー イベントに基づいて、親コンポーネントが子コンポーネントのプロパティを更新します。
2. この更新により、親のプロパティを更新する子コンポーネントでイベントが発生します
3. 親プロパティの更新により、子コンポーネントを更新する別のイベントが発生します
4. ...

私の理解では、Angular 1 での同様の状況は、これらの相互依存するプロパティによってトリガーされるサイクル数に制限を設定することで解決されました。これにより、フレームワークがエラーをスローします。

Angular 2 ではどのように解決されますか? 上記の例のどの時点で変更検出が実際にトリガーされますか?

私は AngularJS 1.x と Angular 2 をいじって、パフォーマンスを比較しようとしました。

これは、Angular 1.x の「マイナス面」を示すPlunkrです。スコープに存在する要素が多すぎると、入力フィールドを編集するときに入力フィールドのレンダリングに遅延が発生することに気付くでしょう。フレームワークは、変更された可能性のあるイベントを検出するたびに、スコープ上のすべての要素をチェックするからです。

最初の Plunkr (html) からの抜粋:

最初の Plunkr (js) からの抜粋:

});

このPlunkrでは、同様のサンプルを Angular 2 で書いています。ラグはまったくないようです。これはAngular 2でどのように解決されますか? フレームワークは、入力フィールドのみが変更されたことを何らかの方法で認識していますか?それとも、VM に最適化された変更検出機能により、ダーティ チェックの実行が高速になっているだけですか?

2 番目の Plunkr からの抜粋:

初めまして、変なタイトルですみません。より良い要約が見つかりませんでした。

だから私が欲しいのは、基本的な 3 つの部分の構造 (ヘッダー/コンテンツ/フッター) で構成されるアプリケーションを作成することです。アクティブなルートに応じて、ヘッダー部分を変更する必要があります (すべてのヘッダーは独自のコンポーネントです)。

これまでのところ、表示されるヘッダーは「mainApp.component」の [ngSwitch] ステートメントによって決定され、次のようになります。

「mainApp.component.ts」は次のようになります。

これは、mainApp.component をレンダリングし、どちらが現在のルートであるかを確認し、それに応じてヘッダーを表示するため、自分localhost:4200/loginまたは手動で移動するとうまく機能します。localhost:4200/homeただし、たとえばボタンをクリックしてルートを変更すると、

navigateToHome ()は単に

ヘッダーは、変更検出がルート変更を検討しないため、[ngSwitch] を再実行したり、mainApp.component を再レンダリングしたりしないため、同じままです。

それらが属するコンポーネントテンプレート内にヘッダーを含めることはすでに考えていましたが、メインコンポーネントでそれを行う方法があれば、それを好むでしょう。

これを解決する方法、またはそれをより良くする方法/別の方法/ベストプラクティスの方法について何か考えがあれば、私はそれを聞いてうれしいです.

ありがとう。

Angular2 RC3 (Angular-CLI を使用) で最初のアプリを試したところ、これで迷ってしまいました...

variable の「変更検出」に問題がありますword。Observablewordのメソッド内の変数を更新しましたが、変更は検出されませんでした。subscribe

app.component.ts

Angular 1$scope.$applyで同様のケースに を使用したことを覚えています。同じように Angular2 を検索したところNgZone.run、 が見つかりました。内部NgZone.runで実行しようとしましたが、何もありませんでした。

私が間違っていることは何ですか？

どうもありがとう。

追加：

サービスを Observable と共有します。

音声認識.service.ts