Routingを使用してAngular 2アプリケーションでデータを共有するにはどうすればよいですか？

Question

私はルーティングされた角度4アプリケーションを持っています。これは、このようなネストされたルートのシリーズがあります：

const routes: Routes = [ 
    { path: "genes/:id", component: GenePageComponent, children: [ 
    { path: "mutations/:mutationType", component: MutationPageComponent }, 
    ]}, 

これは、idが123であるとmutationTypeは「非コード」されるように、私は、/genes/123/mutations/non-codingを訪問することができます。

私はActivatedRouteを注入した場合、私は断片のみためurlまたはparamsが、を購読することができます。つまり、MutationPageComponentにはmutationTypeしか見ることができません。

<router-outlet>が送信できない場合、このmutationTypeパラメータを他の上位コンポーネント（たとえば、サイドバー、検索バー、その他の最上位コンポーネント）と共有するにはどうすればよいですか？

同様に、をGenePageComponentから子供MutationPageComponentに渡すにはどうすればよいですか？

Answer 1

あなたがして、親コンポーネントのルートのparamsにアクセスすることができます。

this.route.parent.params.subscribe(params => ....); 

あなたはまた、各コンポーネントのアップデート、それは他の人が購読するためのサービスで価値の共有サービスを行うことができます。基本的な例は次のようになります。

import { Injectable } from '@angular/core'; 

import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 


@Injectable() 
export class SharedService { 

    private _sharedDataSource = new BehaviorSubject<MyModel>(<MyModel>{}); 
    sharedData$ = this._sharedDataSource.asObservable(); 

    constructor() { } 

    updateSharedData(data: MyModel) { 
    this._sharedDataSource.next(data); 
    } 

} 

BehaviorSubjectはデフォルト値をとり、観測可能で、常に値を発することを確認してください。コンポーネントでは、updateSharedData関数を呼び出してデータを更新し、sharedData$に登録すると、何かが変更されたときに更新された値を取得できます。

希望に役立ちます。

Answer 2

あなたは

{ path: 'form', component: FormComponent ,data :{data :'Test Data'} }, 

とコンポーネント

export class FormComponent { 
    sub: any; 
    constructor(private route: ActivatedRoute) { } 
    ngOnInit() { 
     this.sub = this.route 
      .data 
      .subscribe(value => console.log(value)); 
    } 
} 

More Info

しかし、これは好ましい方法、you can use parent child communication or make a service common and share data between themではないかもしれないが述べたようにあなたは、ルータを通過することができます。そのための参考資料を確認してください。

Parent child communication

Share data using service