CODEWITHSUNDEEP
typescriptangularangular2-routing
user3794166
user3794166

Reputation:

Angular2 rc1, new router and passing data

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;
}

e.g. 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?

Upvotes: 6

Views: 6412

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658067

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.

Upvotes: 3

user3794166
user3794166

Reputation:

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

Upvotes: 2

Related Questions