Angular 2 @Input: Is it possible to pass data from a component to another child route component?
<p>Based on the <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html">docs</a> of Angular 2 you can pass data from a component to another quite easily with the @Input.</p>

<p>So for example I can set the parent like this:</p>

<pre><code>import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
  selector: 'hero-parent',
  template: `
    &lt;h2&gt;{{master}} controls {{heroes.length}} heroes&lt;/h2&gt;
    &lt;hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master"&gt;
    &lt;/hero-child&gt;
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master: string = 'Master';
}
</code></pre>

<p>And the get the data in the child component like this:</p>

<pre><code>import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
  selector: 'hero-child',
  template: `
    &lt;h3&gt;{{hero.name}} says:&lt;/h3&gt;
    &lt;p&gt;I, {{hero.name}}, am at your service, {{masterName}}.&lt;/p&gt;
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}
</code></pre>

<p>So it's quite obvious, pass the <code>[hero]="data"</code> to the template of the parent component (of course in the child selector) and handle them into the child component.</p>

<p><strong>But here's the issue.</strong></p>

<p>My child component DOM element (in this case <code>&lt;hero-child&gt;</code>) is not available in the parent's template but instead it is loaded there in a <code>&lt;router-outlet&gt;</code> element.</p>

<p>How can I pass data then to a child route component then? Isn't the input the correct way?
I want to avoid double,treble etc calls to get the same data that already have in my parent route/component.</p>