2016-05-06 32 views
6

usato per avere, con router deprecato, alcuni componenti che indirizzate allo stesso componente:Angular2 rc1, nuovo router e il passaggio di dati

qualche componente

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

ad es. Comp1 ma ci sono Comp2, COMP3, ecc ...

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{ 

} 

Come si può immaginare, ci sono molti servizi di dati che implementano IDataServiceSome e molti componenti che rotta verso Some. La scelta del servizio dati utilizzato proviene da qualsiasi componente che instrada al componente Some utilizzando un token di dati noto a injector. Con la release rc1 e il nuovo router, lo RouteData è deprecato o rimosso, ma come viene implementato questo scenario?

risposta

2

Attendere che Angular2 aggiunga il data indietro. Nel mio caso, un servizio che decide quale servizio dati è necessario potrebbe essere iniettato tramite DI. Ho scoperto che essere un overkill, semplicemente è un parametro che passa proprio come nelle stringhe di query URL. L'unica differenza era che il parametro non dovrebbe essere visibile all'utente per un'esperienza migliore.

Fonte:

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

2

aggiornamento

RC.4 riporta indietro data

  • passaggio di dati utilizzando percorsi
{ path: 'parent/:id', data: {one: 1}, resolve: {two: 'resolveTwo'}} 

e accesso utilizzando

this.route.snapshot.data 

o

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

Vedi anche il Plunker a https://github.com/angular/angular/issues/9757#issuecomment-229847781

originale

I parametri possono essere passati come:

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

Plunker example

app/app.component.ts contiene i collegamenti e codice in cui sono passati parametri, app/crisis-center/crisis-center.coomponent.ts contiene il codice in cui il parametro viene letto e scritto sulla console.

Non credo che ci sia più supporto per i dati aggiuntivi.

+0

Ma non sostenere 'data' significa che sia necessario utilizzare parametri di stringa di query o di percorso. Entrambe fanno parte dell'esempio di 'tour of heroes'. Nel mio caso, non voglio che l'utente veda il token del servizio dati come parte dell'URL e non c'è motivo per farlo. Quindi non capisco perché 'data' viene rimosso. – RoninCoder

+0

I percorsi sono solo URL e nome del componente. Non ci sono più nomi di percorsi. Se è necessario passare altri dati che non si riflettono nell'URL, è sufficiente utilizzare un servizio condiviso. –

+0

duh! quindi avrai bisogno di un servizio per dire al componente 'Some' quale servizio dati usare? anche facendo così, quanto è difficile capire quale componente è stato l'ultimo che ha impostato il servizio dati che deve essere usato da 'Some'? incubo di debug. Dall'altra parte, un mediatore potrebbe aiutare, ma la vedo totalmente come una complessità inutile. – RoninCoder

Problemi correlati