I've got a parent component that goes to the server and fetches an object.

// 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);

                }

            );

    }

And in (one of several) my child display

export class ChildDisplay implements OnInit{



    @Input()

    node: Node;



    ngOnInit(): void {

        console.log(this.node);

    }



}

It doesn't seem as thought I can just inject data into the router-outlet. It looks like I get the error in the web console...

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

This somewhat makes sense, but how would I do the following....

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

It doesn't seem like router-outlets work the same way.

The only way is to use a shared service.

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

is just invalid. The component added by the router is added as sibling to <router-outlet> and does not replace it.

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

@Injectable() 

export class NodeService {

  private node:Subject<Node> = new BehaviorSubject<Node>();



  get node$(){

    return this.node.asObservable().filter(node => !!node);

  }



  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);

    }

}

Günters answer is great, I just want to point out another way without using Observables.

Here we though have to remember that these objects are passed by reference, so if you want to do some work on the object in the child and not affect the parent object, I would suggest using Günther's solution. But if it doesn't matter, or actually is desired behavior, I would suggest the following.

@Injectable()

export class SharedService {



    sharedNode = {

      // properties

    };

}

In your parent you can assign the value:

this.sharedService.sharedNode = this.node;

And in your children (AND parent), inject the shared Service in your constructor. Remember to provide the service at module level providers array if you want a singleton service all over the components in that module. Alternatively, just add the service in the providers array in the parent only, then the parent and child will share the same instance of service.

node: Node;



ngOnInit() {

    this.node = this.sharedService.sharedNode;    

}

And as newman kindly pointed, you can also have this.sharedService.sharedNode in the html template or a getter:

get sharedNode(){

  return this.sharedService.sharedNode;

}

Service:

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());

  })

}

Component:

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--);

  }

}

There are 3 ways to pass data from Parent to Children

1. Through shareable service : you should store into a service the data you would like to share with the children


2. 
   

   Through Children Router Resolver if you have to receive different data

   
   
   

   this.data = this.route.snaphsot.data['dataFromResolver'];
   
   

   
   


3. 
   

   Through Parent Router Resolver if your have to receive the same data from parent

   
   
   

   this.data = this.route.parent.snaphsot.data['dataFromResolver'];
   
   

   
   

Note1: You can read about resolver here. There is also an example of resolver and how to register the resolver into the module and then retrieve data from resolver into the component. The resolver registration is the same on the parent and child.

Note2: You can read about ActivatedRoute here to be able to get data from router