問題タブ [angular-changedetection]

私が構築している Angular 5 アプリには、サイド メニューとメイン コンテンツ メニューがあります。

左側の 2 つのメニュー項目は、ルート データが異なる同じコンポーネントをロードします。

デフォルトでは、Angular は同じコンポーネント インスタンスを使用して両方をレンダリングします。したがって、ngOnInit()は 1 回だけ呼び出されます (1 つのインスタンス)。

レンダリングするコンポーネントには子コンポーネントが含まれています (変更検出がOnPushに設定されています)。子コンポーネントは@Input()としてデータを受け取ります

最初のメニュー項目をクリックすると、データが正しく表示されます。2 番目のメニュー項目をクリックすると、古いデータがまだ表示されており、サーバーから新しいデータが到着するとレンダリングされます。

言及されている動作は正常です。親コンポーネントのデータにはまだ変更がないため、子コンポーネント@Input()は変更されていないため、子コンポーネントのngOnChange( )はトリガーされません。

データがサーバーから到着すると、親コンポーネントがそのデータを更新するため、それに応じて子コンポーネント@Input()が更新され、子コンポーネントでngOnChange()がトリガーされます。その結果、Angular は UI レンダリングのために go を更新します。

ここでの目標は、同じコンポーネントに移動するときに、新しいデータが到着するのを待つ前に、事前にデータをリセットすることです。

それはどのように実行できますか？

ありがとう

角度 6.0.1。

この問題は大規模なアプリケーション内で顕在化していますが、何が起こっているのかを確認するために簡単なコンポーネントを作成しました。simple コンポーネントには単純なテンプレートがあります。

{{myProp}}

ngOnInit で設定すると、予想どおり、画面にhellothis.myProp = 'hello';という単語が表示されます。ここまでは順調ですね。

ただし、 の値を更新しようとするとmyProp、setTimeoutUI は更新されません。

UI に表示される値はまだhelloです。

コンストラクターに挿入してタイマー内ChangeDetectorRefで呼び出すと、UI が更新されます。cdr.detectChanges()

これは予想される動作ですか、それとも何が間違っていますか? 私はこれを呼び出す必要があるとは思わないでしょうdetectChanges。ChangeDetectorStrategyコンポーネントの は変更していないので、そのままですdefault。

「実際の」アプリでmyPropは、タイマーではなくObservableサブスクリプション内で更新していることに注意してください。そこでは UI が更新されないため、これを調査し、問題を可能な限り簡単に再現するためにタイマーで終了するようになりました。私が知る限り、どのような種類の非同期方法でもプロパティ値を更新しても、UI に変化は表示されません。

アップデート

私の setTimeout への言及は物事を混乱させたと思います。私はそれをデバッグの手段として使用していました。この質問を作り直す代わりに、ここに新しい質問 ( Angular interpolated value not updated on subscription ) を投稿し、より良い説明と、私を悲しませている ngRx コードを示しました。

更新 #2 この問題は、親コンポーネントが にChangeDetectionStrategy設定されていることが原因でしたOnPush。上記で参照した質問を参照してください。

Angular で行に出く​​わしました
。それはどういう意味ですか?

これは、配列の不変の概念に関連していると思います。