Angular 2: Passing Data to Routes?
<p>I am working on this angular2 project in which I am using <code>ROUTER_DIRECTIVES</code> to navigate from one component to other.</p>

<p>There are 2 components. i.e. <code>PagesComponent</code> &amp; <code>DesignerComponent</code>.</p>

<p>I want to navigate from PagesComponent to DesignerComponent.</p>

<p>So far its routing correctly but I needed to pass <code>page</code> Object so designer can load that page object in itself.</p>

<p>I tried using RouteParams But its getting page object <code>undefined</code>.</p>

<p>below is my code:</p>

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

<pre><code>import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { DesignerComponent } from './../../designer/designer.component';
import {RouteParams} from 'angular2/router';

@Component({
    selector: 'pages',    
    directives:[ROUTER_DIRECTIVES,],
    templateUrl: 'app/project-manager/pages/pages.component.html'
})
@RouteConfig([
  { path: '/',name: 'Designer',component: DesignerComponent }      
])

export class PagesComponent implements OnInit {
@Input() pages:any;
public selectedWorkspace:any;    
constructor(private globalObjectsService:GlobalObjectsService) {
    this.selectedWorkspace=this.globalObjectsService.selectedWorkspace;                    
}
ngOnInit() { }   
}
</code></pre>

<p>In the html, I am doing following:</p>

<pre><code>&lt;scrollable height="300" class="list-group" style="overflow-y: auto; width: auto; height: 200px;" *ngFor="#page of pages"&gt;
    {{page.name}}&lt;a [routerLink]="['Designer',{page: page}]" title="Page Designer"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/scrollable&gt;
</code></pre>

<p>In the DesignerComponent constructor I have done the following:</p>

<pre><code>constructor(params: RouteParams) {
    this.page = params.get('page');
    console.log(this.page);//undefined
}
</code></pre>

<p>So far its routing correctly to designer, but when I am trying to access <code>page</code> Object in designer then its showing <code>undefined</code>.
Any solutions?</p>