角2：異なるルート間でデータを共有する

Question

私はSOで同様の質問を検索しましたが、私の特定のケースに対処するものは見つかりませんでした。 https://angular.io/docs/ts/latest/cookbook/component-communication.html

しかし、私のコンポーネントが異なるルートにあるため、そこに記載されている技術はどれも私のためには機能しません。この記事では、主に親子コンポーネントの通信について説明しています。両方のコンポーネントが同時に読み込まれる限り、兄弟コンポーネントで動作するケースもあります。

私のケースは、Angular 2 Heroesチュートリアルと非常によく似ています。私は、ヒーローではなく顧客のリストを含むテーブルを表示するルートを持っています。ユーザーが特定の顧客をクリックすると、経路変更が発生し、選択された顧客のデータ（主人公ではなく）のフォームが表示されます。

ヒーローチュートリアルでは、選択したヒーローデータを取得するためにサービス呼び出しを実行しますが、それらのデータがすでにメモリにある場合は、無駄な追加のAJAX呼び出しを避けたいと考えています。選択した顧客データを顧客フォームコンポーネントに渡してすぐに表示するだけです。

私が望むオブジェクトを格納して取り出すことができる「グローバルセッション」サービスを考えていますが、これは良い考えではありません。他のより適切なアプローチがありますか？

メインアプリケーションファイルで提供し、あなたが

main.app.ts

@Component({ 
... 
    providers:[yourDataService] 
... 
}) 

他のコンポーネント全体のアプリで利用できるようになります/設定データを取得したいときはいつでも、それを注入され

Answer 1

利用サービス

import {yourDataService} from '...'; 

@Component({ 
... 
providers:[]// we must use provider from main file 
... 
}) 
export class someComponent{ 

    contructor(private myData:yourDataService){} 

} 

メインアプリケーションファイルからプロバイダを使用することが重要です。なぜなら、各コンポーネントでサービスを提供する場合、サービスの別のインスタンスとコース一部のデータが詳細は

を変更したときにも通知されるobservablesを使用することができ、各サービスにおけるSE異なるデータ

はhierarchical injectionsまたはtree injector

Answer 2

を見て、あなたが触発さについてNgRxソリューションをどう思いますかRedux？もっと読むことができます - https://github.com/ngrx/store

あなたは適切なコンポーネントで購読することができる単一のアプリケーションストアを持っています。ルートが変更される前にイベントを送信することができます。このソウルシップはレデューサーのみを使用するため、ストアを使用する方法とは異なる方法で、データは不変になります。これが次の利点です。

Answer 3

あなたが何をしているのかわかりませんが、兄弟ルートを越えてデータを共有する必要がある場合は、これを試すことができます。

モジュールのインポートを作成し、モジュールのルートでサービスを宣言モジュールに

import { MyService } from './my.service’; 

@NgModule({ 
    ... 
    providers: [ 
    MyService 
    ] 
    … 
}) 

をサービスを宣言するには、我々は、子のルートを参照することにより、サービスを渡すことができることを意味します。我々ので、コンポーネントのメタデータにサービスを追加していない、サービスを使用する必要があり、各コンポーネントでは、サービス

import { MyService } from '../my.service’; 

をインポートし、子ルートコンポーネントに親コンポーネント

でサービスを使用しないでください。すでにモジュール定義に追加されています。あなたは一人の子供のルートコンポーネントにおけるサービスのプロパティを設定した場合のコンポーネントのコンストラクタ

export class MyChildRouteComponent implements OnInit { 
... 
constructor(
    private _myService: MyService, 
    private _router: Router 
) { } 
... 
} 

にサービスを追加し、あなたは、兄弟の子コンポーネントからそれを得ることができるようになります。