Angular2に表示するたびにコンポーネントを再作成させる方法

Question

angular2 Typescriptアプリケーションでは、ルータを使用します。 私たちのコンポーネントはかなり一般的であり、ルータから取得するパラメータに基づいて動作が大幅に変化します。

アプリケーションは初期段階で開発されており、私が言及している動作は最近観察されています。私はそれがコードの変化かライブラリの1つの急激な変化のためかどうかは分かりません。

Listという名前のコンポーネントを考えます。それは表示すべきエンティティタイプのようなコンテキスト（ルート、ラッピングコンポーネントなど）からいくつかの情報を取得します。

ルートを変更すると、Listコンポーネントは再インスタンス化されませんが、そのパラメータは更新されます。 ngOnInitにこれらのパラメータを使用してコンポーネントをセットアップするので、後で変更しても効果はありません。

私はこの問題を回避するために変更検出を使用できることを知っていますが、むしろそうではありません。その理由は、これにより、開発者が回帰バグを導入するのがはるかに容易になるということです（例えば、人々のリストへの移動、何かの実行、注文リストへの移動、存在しないはずのものなど） 、テストし、再現する。彼らは生産に漏れる可能性が非常に高いです。

ルートが変更されたときにリストコンポーネントを再作成するにはどうすればよいですか。

その他の観測：ルータでは、Listコンポーネントを表示しないルートに移動してListに戻ると、コンポーネントが再インスタンス化されます。

Answer 1

アクティブなルートparamsにサブスクライブします。観察可能です

Answer 2

サブスクリプションではなく、asyncパイプを使用して、観察可能な最後の値を表示できます。

DOC：Pipes

Answer 3

ルーターが新しいルートに移動すると、それは、もはや必要なコンポーネントを破壊し、新しいコンポーネントツリーに既存のコンポーネントツリーを比較し、存在しない必要なコンポーネントを作成し、再使用してインスタンスになりますそれでも必要なコンポーネントの1つの同じルートを使用していて、フルURL文字列から手動でsuffixStuffを抽出すると、angularはsuffixStuffの変更を認識せず、コンポーネントを再作成しません。もしsuffixStuffが適切に宣言されたルートを使用して角度に気付くと（アクティブルートパラメータ、Samehの回答ごとに）、angleは通知され、まだ必要なコンポーネントを再作成します。

これも考慮する必要があります。たとえば、Listコンポーネントのoninitはアクティブなルートパラメータを取得し、データベースからの読み取りを実行してコンポーネントを設定します。ユーザーは、そのコンポーネントの内容をクリックして、データベース内のレコードを作成、更新、削除することができます。したがって、これらのアクションが完了したら、データベースから再読み込みを行い、結果をユーザーに表示したいと考えています（ACIDデータを表示するだけの良い方法はありますか？）。当然、oninitメソッドで間違っているreadAndSetupコードにアクセスし、何らかの形式のページリロードや再ルーティングを試みると、同じルート（アクティブなパラメータとすべて）へのバックツーバックのナビゲートが可能になります。既存のコンポーネントツリー全体を再利用します。

代わりに、は、セットアップコードをoninitから分離する必要があります。 Oninitは、アクティブなルートパラメータを取得し、それらから成形DbQueryを覚えて、別のものを呼び出します。readFromDbメソッドは、記憶されたformedDbQueryを使用します。このように、再読み込みではコンポーネントを再作成する必要はありません（oninitを呼び出す）、アクションが完了した後にthis.readFromDbを呼び出すだけです。