アングル2サービス依存性注入問題

Question

私のアプリケーションでは、ListComponentとDetailsComponentの2つのコンポーネントとサービスMyModuleServiceを持つモジュールがあります。

ユーザーがListComponetにアクセスすると、サーバーからリストを取得し、サービスのListプロパティ（キャッシュとして使用）に追加します。

ユーザーがリスト内の項目をクリックすると、その項目の詳細ページに移動します。

詳細なコンポーネントでは、次と前へのリンクを持つナビゲーションがあります。サービスのリストプロパティを使用して、次と前の項目を決定します。

ユーザーがリストページに戻ると、リストはキャッシュから、つまりサービスのListプロパティからレンダリングされます。

マイリストコンポーネントには、ユーザーが検索条件を指定し、その条件に一致するサーバーからアイテムを取得できる検索フォームもあります。

上記のMyModuleへの参照を持たない他のルートに移動してリストページに戻ると、MyModuleServiceがリフレッシュされないということは、それが破壊されなかったことを意味しますサービスインスタンス

おそらく、MyModuleServiceがグローバル依存性注入コンテキストに追加されているためです。

誰でもガイドできますが、サービスの範囲をモジュールに限定するにはどうすればよいですか？そのため、別のルートに移動すると、MyModuleServiceインスタンスが破棄されます。

Answer 1

おそらく、MyModuleServiceがグローバル依存性注入コンテキストに追加されているためです。

はい、this is by designです。

：

モジュールにスコープを制限する方法は、（所与のドキュメント・リンクに述べたように）、次いで@Componentデコレータのprovidersアレイでサービスを宣言し、モジュールの「トップ成分を」使用することによるものです

@Component({ 
    selector: 'my-top-component', 
    providers: [ MyModuleService ] 
}) 
export class MyTopComponent { } 

このように、MyModuleServiceの範囲は、MyTopComponentとその子に限定されます。しかし、ListComponentとDetailsComponentの2つのネストされたコンポーネントがMyTopComponentにあるので、child routesも処理する必要があります。

Answer 2

異なるモジュールにサービスのインスタンスを提供するには、providers配列を使用します。

Module1: 

providers: [MyService] 

Module2: 

providers: [MyService] 

現在、これらの2つのモジュールが同じサービスの異なるのインスタンスを使用しています。

必要に応じて、コンポーネントレベルでプロバイダを宣言できます。つまり、そのコンポーネントおよびサブコンポーネントは、サービスの個々のインスタンスへのインスタンスを持ちます。

アプリ全体にサービスのインスタンスを1回だけ使用させたい場合は、最上位モジュールのプロバイダ配列に提供します。