フォース複数のコンポーネント

Question

コンテキスト

私は、複数のサービスが異なるエンドポイントをヒットするために使用することしたいAngular2アプリケーションを、書いています。要求の数を減らしたり、複数のコンポーネントがキャッシュ内のデータを変更してエンドポイントに送信することを許可するために、各サービスがそのデータをキャッシュするようにしたいと思います。

コード

@Injectable() 
    export class MyService { 

    private items: any; 

    constructor (private http: Http) { 
    this.items = []; 
    } 

    getItems() { 
    if(!this.items) { 
     return this.http.get(this.endpoint).map((data) => { 
     this.items = data; 
     return data; 
     }); 
    } else { 
     return Observable.of(this.items); 
    } 
    } 

    addItem (item) { 
    this.items.push(item); 
    } 

    saveItems() { 
    return this.http.put(endpoint, this.items); 
    } 
} 

その後、コンポーネント1が行う可能性があります：

userClickedAddItem (item) { 
    this.myService.addItem(item); 
} 

そしてCOMPONENT2を行う可能性がありますが：

userClickedSave() { 
    this.myService.saveItems().subscribe((items) => { 
    // Do something 
    }); 
} 

を次にコンポーネントのモジュールに私が何かをやっていますlike

@NgModule({ 
    providers: [MyService], 
    declarations: [ 
    Component1 
    Component2 
    ] 
}) 

問題

Angular2が提供するサービスの個々のインスタンスをインスタンス化しているので、コンポーネント1はaddItemと呼ばれるにもかかわらず、COMPONENT2は、それがMyServiceでの別のインスタンスを持っているので、何の項目が追加されていないと考えています。 Internetは、これを処理する方法は、アプリケーションレベルで宣言してサービスをシングルトンにすることであると言います。しかし私はむしろそれをやりたいのですが、アプリケーションのためにモジュール設計を使用しています。これは、必要に応じて遅延ロードモジュールを設計することです。したがって、私はそれらを使用する必要があるモジュールとコンポーネントに従ってサービスを整理しておくことを望んでいます。

Angular2のページHierarchical Dependency Injectionでは、異なるデータがキャッシュされているサービスのインスタンスが必要な場合に、反対の問題を解決する方法が説明されています。しかし、それは私が望むものを達成する方法を説明していません。それは、同じサービスを使用する異なるコンポーネント間でそのデータを持続させることです。また、モジュールレベルでサービスを提供するだけで十分だと思いますが、まだ私の2つのコンポーネントでサービスのインスタンスを別々にしています。

サービスのプロバイダをアプリケーションモジュールに上げることなく、2つのコンポーネント間で共有されるサービスにデータを保持する方法はありますか？

Answer 1

Angular 2のドキュメントによれば、親子コンポーネント間で達成したいことが可能です。

親プロバイダでサービスを宣言すると、子は同じインスタンスを使用します。

AppModuleで宣言すると、parentとchildは異なるサービスインスタンスを使用します。

詳細情報Parent and children communicate via a service