Angular2 how to pass data throught router
<p>I'm devolping a web application using <code>Angular v2.0.0</code>. Since I have a sub-navigation in my app I would like to pass some data to a sub-page, that loads its own component, through the <code>&lt;router-outlet&gt;</code>.</p>

<p>As i can see on Angular2 documentation I can reach this purpose if i include a sub-page directive in the main component template, but this isn't what i need.</p>

<p>I'd like to use code like the following:</p>

<p><strong>app.routes.ts</strong></p>

<pre><code>export const routes: RouterConfig = [
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];
</code></pre>

<p><strong>main.component.ts</strong></p>

<pre><code>@Component({
    moduleId: module.id,
    selector: 'main',
    templateUrl: 'main.component.html'
})

export class MainComponent {
    maindata: Object = {name:'jim'};
}
</code></pre>

<p><strong>main.component.html</strong></p>

<pre><code>&lt;h1&gt;Home&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>one.component.ts</strong></p>

<pre><code>@Component({
    moduleId: module.id,
    selector: 'one',
    inputs: ['data'],
    templateUrl: 'one.html'
})

export class OneComponent {
    @Input() data;
}
</code></pre>

<p><strong>one.component.html</strong></p>

<pre><code>&lt;h2&gt;{{ data.name }}&lt;/h2&gt;
...
</code></pre>

<p>How to do this?</p>