"router-outlet"子コンポーネント（角2）にデータを渡す

Question

私はサーバーに行きオブジェクトをフェッチする親コンポーネントを持っています。

// parent component 

@Component({ 
    selector : 'node-display', 
    template : ` 
     <router-outlet [node]="node"></router-outlet> 
    ` 
}) 

export class NodeDisplayComponent implements OnInit { 

    node: Node; 

    ngOnInit(): void { 
     this.nodeService.getNode(path) 
      .subscribe(
       node => { 
        this.node = node; 
       }, 
       err => { 
        console.log(err); 
       } 
      ); 
    } 

そして、私の子表示（いくつかの1）で

export class ChildDisplay implements OnInit{ 

    @Input() 
    node: Node; 

    ngOnInit(): void { 
     console.log(this.node); 
    } 

} 

それは私がちょうどルータコンセントにデータを挿入することができます考えていないようです。それは私がWebコンソールでエラーが出るようにこれはやや理にかなって

Can't bind to 'node' since it isn't a known property of 'router-outlet'. 

...見えますが、私はどうなるか、次の....

1) Grab the "node" data from the server, from within the parent component 
2) Pass the data I have retrieved from the server into the child router-outlet 

それはように見えるしていませんルータ出口も同じように機能します。

Answer 1

唯一の方法は、共有サービスを使用することです。

<router-outlet [node]="..."></router-outlet> 

は無効です。ルータによって追加されたコンポーネントは、兄弟として<router-outlet>に追加され、置き換えられません。

がhttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

@Injectable() 
export class NodeService { 
    private node:Subject<Node> = new BehaviorSubject<Node>(); 
    node$ = this.node.asObservable(); 

    addNode(data:Node) { 
    this.node.next(data); 
    } 
} 

@Component({ 
    selector : 'node-display', 
    providers: [NodeService], 
    template : ` 
     <router-outlet></router-outlet> 
    ` 
}) 
export class NodeDisplayComponent implements OnInit { 
    constructor(private nodeService:NodeService) {} 
    node: Node; 
    ngOnInit(): void { 
     this.nodeService.getNode(path) 
      .subscribe(
       node => { 
        this.nodeService.addNode(node); 
       }, 
       err => { 
        console.log(err); 
       } 
      ); 
    } 
} 

export class ChildDisplay implements OnInit{ 
    constructor(nodeService:NodeService) { 
     nodeService.node$.subscribe(n => this.node = n); 
    } 
} 

Answer 2

も参照してくださいGünters答えは、私はちょうど観測を使用せずに別の方法を指摘したい、素晴らしいです。

ここでは、これらのオブジェクトは参照渡しであることを覚えておく必要があります。そのため、親オブジェクトに影響を与えずに子オブジェクト内のオブジェクトを処理したい場合は、Güntherのソリューションを使用することをおすすめします。しかし、それは問題ではない、または実際に希望の動作、私は以下をお勧めします。あなたが値を割り当てることができ、あなたの親で

@Injectable() 
export class SharedService { 

    sharedNode = { 
     // properties 
    }; 
} 

は：

this.sharedService.sharedNode = this.node; 

そして、あなたの子供たち（と親）で

、あなたのコンストラクタ内の共有サービスを注入します。そのモジュールのコンポーネント全体にシングルトンサービスが必要な場合は、モジュールレベルのプロバイダ配列でサービスを提供することを忘れないでください。あるいは、プロバイダ のプロバイダ配列にというサービスだけを追加すると、親と子は同じサービスインスタンスを共有します。

node: Node; 

ngOnInit() { 
    this.node = this.sharedService.sharedNode;  
} 

そしてニューマンが親切に指摘したように、あなたはまた、HTMLテンプレート内this.sharedService.sharedNodeやゲッターを持つことができます。

get sharedNode(){ 
    return this.sharedService.sharedNode; 
} 

Answer 3

サービス：

import {Injectable, EventEmitter} from "@angular/core";  

@Injectable() 
export class DataService { 
onGetData: EventEmitter = new EventEmitter(); 

getData() { 
    this.http.post(...params).map(res => { 
    this.onGetData.emit(res.json()); 
    }) 
} 

コンポーネント：

import {Component} from '@angular/core';  
import {DataService} from "../services/data.service";  

@Component() 
export class MyComponent { 
    constructor(private DataService:DataService) { 
    this.DataService.onGetData.subscribe(res => { 
     (from service on .emit()) 
    }) 
    } 

    //To send data to all subscribers from current component 
    sendData() { 
    this.DataService.onGetData.emit(--NEW DATA--); 
    } 
}