私が構築している Angular 5 アプリには、サイド メニューとメイン コンテンツ メニューがあります。
左側の 2 つのメニュー項目は、ルート データが異なる同じコンポーネントをロードします。
デフォルトでは、Angular は同じコンポーネント インスタンスを使用して両方をレンダリングします。したがって、ngOnInit()は 1 回だけ呼び出されます (1 つのインスタンス)。
レンダリングするコンポーネントには子コンポーネントが含まれています (変更検出がOnPushに設定されています)。子コンポーネントは@Input()としてデータを受け取ります
最初のメニュー項目をクリックすると、データが正しく表示されます。2 番目のメニュー項目をクリックすると、古いデータがまだ表示されており、サーバーから新しいデータが到着するとレンダリングされます。
言及されている動作は正常です。親コンポーネントのデータにはまだ変更がないため、子コンポーネント@Input()は変更されていないため、子コンポーネントのngOnChange( )はトリガーされません。
データがサーバーから到着すると、親コンポーネントがそのデータを更新するため、それに応じて子コンポーネント@Input()が更新され、子コンポーネントでngOnChange()がトリガーされます。その結果、Angular は UI レンダリングのために go を更新します。
ここでの目標は、同じコンポーネントに移動するときに、新しいデータが到着するのを待つ前に、事前にデータをリセットすることです。
それはどのように実行できますか？
ありがとう