title: Angular2 using @Inputs with <router-outlet>s
body: <p>I have a sub-navigation in my page that displays some subviews below a common main view. I would like to pass an object to the subviews through the <code>&lt;router-outlet&gt;</code> so that I can retrieve the data once in the main component and just share it with my sub components. </p>
  
  <p>Note: If I include the directive <code>&lt;one&gt;&lt;/one&gt;</code> in the <em>main.html</em> it works but this isn't my desired behavior.</p>
  
  <p><strong>Main View:</strong></p>
  
  <pre><code>&lt;h1&gt;Details&lt;/h1&gt;   
  &lt;a [router-link]="['./sub1']"&gt;One&lt;/a&gt; | 
  &lt;a [router-link]="['./sub2']"&gt;Two&lt;/a&gt; | 
  &lt;a [router-link]="['./sub3']"&gt;Three&lt;/a&gt;   
  &lt;hr/&gt;  
  &lt;router-outlet [data]="maindata"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>Sub View 1:</strong></p>
  
  <pre><code>&lt;h2&gt;{{ data.name }}&lt;/h2&gt;
  ...
  </code></pre>
  
  <p><strong>Main View:</strong></p>
  
  <pre><code>@Component({
      selector: 'main-detail',
      directives: [ROUTER_DIRECTIVES],
      templateUrl: './main.html'
  })
  @RouteConfig([
      { path: '/', redirectTo: '/one' },
      { path: '/one', as: 'One', component: OneComponent },
      { path: '/two', as: 'Two', component: TwoComponent },
      { path: '/three', as: 'Three', component: ThreeComponent }
  ])
  export class MainComponent {
      maindata: Object = {name:'jim'};
  }
  </code></pre>
  
  <p><strong>Sub View 1:</strong></p>
  
  <pre><code>@Component({
      selector: 'one',
      directives: [CORE_DIRECTIVES],
      inputs: ['data'],
      templateUrl: './one.html'
  })
  export class OneComponent {
      @Input() data;
  }
  </code></pre>