Angular2 rc1, new router and passing data

Question

Used to have, with deprecated router, a few components that routed to the same component:

Some Component

import {Component, Injector} from 'angular2/core';
import {IDataServiceSome} from './IDataServiceSome';
import {RouteData} from 'angular2/router';

@Component({
    selector: 'Some',
    templateUrl: './Some.html'
})
export class Some {
    Model;
    DataService: IDataServiceVendor;

    constructor(routeData: RouteData, injector: Injector) {
        var dataServiceToken = routeData.get('DataServiceToken');
        this.DataService = injector.get(dataServiceToken);
        this.Model = DataService.getSomeModel();
    }
}

IDataServiceSome

export interface IDataServiceSome {
    getSomeModel(): Object;
}

eg Comp1 but there are Comp2, Comp3, etc...

import {Component} from 'angular2/core';
import {RouteConfigs, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {DataServiceSome1} from './IDataServiceSome1';

@RouteConfigs([
    { path: '/Some', name: 'Some', component: Some, data: { DataServiceToken: DataServiceSome1 } }])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [DataServiceSome1],
    selector: 'Comp1',
    template:
    `<div>
        <router-outlet></router-outlet>
        <h1>Comp1 routed to Some</h1>
    </div>`
})
export class Comp1{

}

As you might have guessed, there are many data services that implement IDataServiceSome and many components that route to Some . The choice of which data service is used, comes from any component that routes to Some component using a data token known to injector . With rc1 release and new router, the RouteData is deprecated or removed, but how is this scenario implemented moving forward?

Answer 1

update

RC.4 brings data back

• Passing data using routes

{ path: 'parent/:id', data: {one: 1}, resolve: {two: 'resolveTwo'}}

and access it using

this.route.snapshot.data

or

this.route
      .data
      .subscribe(v => console.log(v));

See also the Plunker at https://github.com/angular/angular/issues/9757#issuecomment-229847781

original

Parameters can be passed like:

• with a router link

<a [routerLink]="['/crisis-center', {bar: 'foo1'}]">Crisis Center</a>

• with router.navigate()

this.router.navigate(['/crisis-center', {bar: 'foo2'}]);

Plunker example

app/app.component.ts contains the links and code where parameters are passed, app/crisis-center/crisis-center.coomponent.ts contains the code where the parameter is read and written to the console.

I don't think there is support for extra data anymore.

Answer 2

Wait for Angular2 to add the data back. In my case, a service that decides which data service is needed could be injected via DI. I found that to be an overkill, it simply is a passing parameters just like it's in URL query strings. The only difference was that the parameter shouldn't be visible to user for a better experience.

Source:

http://www.github.com/angular/angular/issues/8515