Geek Answers Handbook

Angular2 rc1, the new router and data transfer

There are several components that are routed to the same component with an outdated router:

Some components

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 is 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 are routed to Some . The choice of which data service is used comes from any component that is routed to the Some component using a data marker known as an injector . With the release of rc1 and the new router, RouteData deprecated or removed, but how is this scenario implemented ahead?

+6
source share
2 answers

Wait for Angular2 to add data back. In my case, a service that decides which data service is needed can be introduced through DI. I found this to be brute force, it’s just the transfer parameters similar to those in the URL query strings. The only difference was that the parameter should not be visible to the user for a better experience.

Source:

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

+2
source

Update

RC.4 brings data back

  • Data transfer 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 Plunker at https://github.com/angular/angular/issues/9757#issuecomment-229847781

original

Parameters can be passed as:

  • with a router
 <a [routerLink]="['/crisis-center', {bar: 'foo1'}]">Crisis Center</a>
  • with router.navigate()
 this.router.navigate(['/crisis-center', {bar: 'foo2'}]);

Plunger example

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

I do not think that there is additional support for additional data.

+2
source

More articles:


All Articles