Angular2 Router-Outletコンポーネントイベント出力（A2> = v1.2.0）

Question

私は、ルーティングされたコンポーネントからイベントを受け取り、それらに親コンポーネントからデータを渡したいと思う。

コンテンツのApp-テンプレート：

<router-outlet [data]='data' (selected)="selected($event)"></router-outlet> //this is not working 

A 'コンテンツアプリ' ルーティングコンポーネントからのイベントを受け取る必要があるコンポーネント（例えば、 'コンテンツ・アプリリスト'）

<content-app> // this is where the events should arrive 
    <content-app-header></content-app-header> 
    <router-outlet></router-outlet>  
    <content-app-list></content-app-list> //this is a routed component, that emits events and should bind data 
</content-app> 

私ができますデータを扱うサービスを実装しますが、私はフレームワークコンセプトを好んでいます。

Answer 1

今のところ、ルーティングされたコンポーネントに直接データを渡すことはできません。 2015年からGitHubにもissueがあります。ただし、問題は解決されており、この機能は現在サポートされていません。基本的には3つのオプションがあります。

1. 共有サービス
2. パスデータURLまたはクエリを介したが、子供のコンストラクタ

へ

を注入する親コンポーネントをparamsは最初のオプションは間違いなくこれを達成するためのクリーンな方法であります。コンポーネントのやり取りには非常に良いarticleもあります。ただし、ObservablesまたはSubjectをyor共有サービスに使用する場合は、サブスクリプションを適切に管理してください。サービスはシングルトンになるので、実際には生きていて記憶に残ります。

第2の選択肢も、私が言う有効なアプローチです。 ActivatedRouteを注入することで、ルータはObservablesも活用するので、パラメータを購読することさえできます。次のようにして、これを実現することができます。

constructor(private activatedRoute: ActivatedRoute) { } 

ngOnInit() { 
    this.paramSubscription = this.activatedRoute.params.subscribe(...); 
} 

ngOnDestroy() { 
    this.paramSubscription .unsubscribe(); 
} 

あなたが見ることができるように、あなたがしなければならないすべてはActivatedRouteを注入し、その後ngOnInitライフサイクルフックでのparamsに加入しています。前述のように、ngOnDestroyに登録を解除してください。

3番目のオプションは、DI経由で親コンポーネントを子コンポーネントに挿入することです。

constructor(private _parentComponent: ParentComponent) 

次に、親コンポーネントからメソッドを呼び出してデータを取得できます。そのタイプの最初の親が注入されていることに注意してください。

ボトムラインは、私は可能であればのparams 共有サービスまたはURL /クエリを使用することができ示唆していることです。