title: Angular 2: Passing Data to Routes?
body: <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>