Angular2は@Inputとrouter-outletを使用しています。取り扱い

Question

だから、私はコンテナコンポーネント持っngrx /ストアでダムのコンポーネントをルーティングされた内部のナビゲーションを持っている「プロフィールを」 - 「情報」などのタブを切り替える、「お気に入り」、「PublishedArticlesを」 。私は現在、ルータ・コンセントとサブのルートでこれらのタブをロードしています

は「/情報」、「/お気に入り」、「/記事」うそ。また、ルータ出口がcub-componentにナビゲートすると、ロードされたProfile状態のスライスを渡したいと思う。

普通のの@Inputは、ダムコンポーネントをこのような方法で（ルータアウトレット経由で）ロードすることはできません。そして今、私は、あまりにも多くのリストラをせずに何らかの方法でそれを実装するためのソリューションを探しています。

ルーターアウトレットによってロードされたダムコンポーネント（子ルート）と状態を通信する最も良い方法は何ですか？あるいは、おそらく、一般的にこのようなシナリオに通常どのようにアプローチするのでしょうか？

Answer 1

私は、すべてのコンポーネントに注入されServiceはこの1つのように、同じデータを共有するだろう：次に、あなたのコンポーネントでは、あなたが順番にRouterサービスを利用したナビゲーションの変更のために聞くことができ

@Injectable() 
export class SharedDataService { 
    someData:Object={} 
    constructor() { 

    } 
} 

をコンポーネントとUIのデータを更新します。

import {Component,OnInit} from '@angular/core'; 
import {NavigationEnd, Router} from "@angular/router"; 
import {SharedDataService} from "../shared-data.service"; 
@Component({ 
    selector: 'profile', 
    templateUrl: './profile.component.html', 
    styleUrls: ['./profile.component.css'] 
}) 
export class Profile implements OnInit { 
    someData:Object; 

    constructor(private sharedDataService: SharedDataService, private router:Router) { 
    this.someData = this.sharedDataService.someData; 
    this.router.events.subscribe((val)=>{ 
     if(val instanceof NavigationEnd){ 
      //update the shared data when this page is being navigated to 
      this.someData=this.sharedDataService.someData; 
     } 
    }); 
    } 
}