Angular 2: Passing Data to Routes?

You can't pass objects using router params, only strings because it needs to be reflected in the URL. It would be probably a better approach to use a shared service to pass data around between routed components anyway.

The old router allows to pass data but the new (RC.1) router doesn't yet.

Update

data was re-introduced in RC.4 How do I pass data in Angular 2 components while using Routing?

It changes in angular 2.1.0

In something.module.ts

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { BlogComponent } from './blog.component';import { AddComponent } from './add/add.component';import { EditComponent } from './edit/edit.component';import { RouterModule } from '@angular/router';import { MaterialModule } from '@angular/material';import { FormsModule } from '@angular/forms';const routes = [  {    path: '',    component: BlogComponent  },  {    path: 'add',    component: AddComponent  },  {    path: 'edit/:id',    component: EditComponent,    data: {      type: 'edit'    }  }];@NgModule({  imports: [    CommonModule,    RouterModule.forChild(routes),    MaterialModule.forRoot(),    FormsModule  ],  declarations: [BlogComponent, EditComponent, AddComponent]})export class BlogModule { }

To get the data or params in edit component

import { Component, OnInit } from '@angular/core';import { Router, ActivatedRoute, Params, Data } from '@angular/router';@Component({  selector: 'app-edit',  templateUrl: './edit.component.html',  styleUrls: ['./edit.component.css']})export class EditComponent implements OnInit {  constructor(    private route: ActivatedRoute,    private router: Router  ) { }  ngOnInit() {    this.route.snapshot.params['id'];    this.route.snapshot.data['type'];  }}

You can do this:

app-routing-modules.ts:

import { NgModule                  }    from '@angular/core';import { RouterModule, Routes      }    from '@angular/router';import { PowerBoosterComponent     }    from './component/power-booster.component';export const routes: Routes = [  { path:  'pipeexamples',component: PowerBoosterComponent, data:{  name:'shubham' } },    ];    @NgModule({      imports: [ RouterModule.forRoot(routes) ],      exports: [ RouterModule ]    })    export class AppRoutingModule {}

In this above route, I want to send data via a pipeexamples path to PowerBoosterComponent.So now I can receive this data in PowerBoosterComponent like this:

power-booster-component.ts

import { Component, OnInit } from '@angular/core';import { Router, ActivatedRoute, Params, Data } from '@angular/router';@Component({  selector: 'power-booster',  template: `    <h2>Power Booster</h2>`})export class PowerBoosterComponent implements OnInit {  constructor(    private route: ActivatedRoute,    private router: Router  ) { }  ngOnInit() {    //this.route.snapshot.data['name']    console.log("Data via params: ",this.route.snapshot.data['name']);  }}

So you can get the data by this.route.snapshot.data['name'].