2016-04-08 23 views
7

Cercando di utilizzare RouteParams per ottenere i parametri di query-string, ma ho appena ottenere l'erroreangolare 2 errore: Impossibile risolvere tutti i parametri per '' RouteParams

Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable. angular2-polyfills.js:332 Error: Cannot read property 'getOptional' of undefined.......

Dai un'occhiata a questo Plnkr. Come posso utilizzare RouteParams senza ricevere questo avviso?

I file importanti sono:

boot.ts:

import {bootstrap} from 'angular2/platform/browser'; 
import {ROUTER_PROVIDERS, RouteParams} from 'angular2/router'; 
import {AppComponent} from './app/app.component'; 

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]); 

e app.component.ts:

import {Component, OnInit} from 'angular2/core'; 
import {RouteParams} from "angular2/router"; 

@Component({ 
    selector: 'app', 
    template: ` 
    <p *ngIf="guid">guid gived is: {{guid}}</p> 
    <p *ngIf="!guid">No guid given in query-string in URL</p> 
    ` 
}) 
export class AppComponent implements OnInit { 
    guid:string; 

    constructor(private _params: RouteParams) {} // 

    ngOnInit() { 
    this.guid = this._params.get('guid'); 
    } 

} 

Aggiornamento:

io non sto avendo alcun percorsi, ho solo avere la root route predefinita (se è possibile chiamarla route quando non ho altri percorsi ...). Ma, come suggerito da Gianluca, ho aggiunto il seguente itinerario config:

@RouteConfig([ 
    { path: '/:guid', name: 'Home', component: AppComponent, useAsDefault: true }, 
]) 

Ma ancora ottengo lo stesso errore (il Plnkr viene aggiornato) ...

+0

da dove proviene questo 'guid'? se non hai nessun percorso? –

+0

È solo una querystring di cui ho bisogno per la mia app, quindi qualcuno lo userebbe in questo modo: mydomain.com/myapp?guid=qualcosa. Potresti averlo chiamato qualcos'altro qui, come "testparamenter" o qualcosa del genere ... – EricC

+0

ho appena postato la mia risposta spero che ti possa aiutare. –

risposta

10

Rimuovere RouteParams da

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]); 

RouteParams è fornito dal router. Se lo fornite da solo, l'iniezione fallisce.

Vedere https://angular.io/api/router/Params per un esempio. RouteParams può essere iniettato solo sui componenti aggiunti dal router.

Plunker example

+0

In tal caso viene visualizzato un altro errore: 'ECCEZIONE: nessun provider per RouteParams!' – EricC

+0

È possibile modificare il plunker e farlo funzionare? Ho rimosso ROUTER_PROVIDERS, RouteParams dal bootstrap (e l'importazione) e aggiunto 'provider: [RouteParams]' sul componente, ma ho ricevuto lo stesso errore ... – EricC

+0

Aha, è stato interessante, grazie mille Günter! – EricC

0

Hai specificato guid nel @RouteConfig?

@RouteConfig([ 
    {path: '/something/:guid', name: 'Something', component: Something} 
]) 
+0

Anche se non ho percorsi (eccetto la root route predefinita (si tratta di un instradamento quando non si utilizza il router))? C'è un altro modo per ottenere i parametri della query url? – EricC

+0

Non penso che ... routeParams richiede la configurazione da RouteConfig, come in Angular 1. È possibile aggiungere l'opzione 'useAsDefault: true' per specificare il percorso root predefinito. –

+0

Ho aggiunto @RouteConfig, ho ancora lo stesso errore (vedi lo stesso plunker). Ho aggiornato anche questa domanda ... – EricC

0

Non vi sto a capire problema correttamente, ma sì, come hai detto nel commento

Is there another way of getting the url query params?

Than possiamo trasmettere via utilizzando data proprietà siamo in grado di inviare i dati tramite il percorso utilizzando data proprietà del @RouteConfig annotation fornito da angualr2. utilizzando questa proprietà possiamo inviare dati aggiuntivi ai componenti al momento della configurazione del percorso senza mostrarli nell'URL. ecco un esempio di questa proprietà.

@RouteConfig([ 
    {path: '/product/:id', component: ProductDetailComponentParam, 
    as: 'ProductDetail', data: {isProd: true}}]) 

export class ProductDetailComponentParam { 
    productID: string; 
    constructor(params: RouteParams, data: RouteData) { 
     this.productID = params.get('id'); 

     console.log('Is this prod environment', data.get('isProd')); 
    } 
} 

utilizzando questo è possibile inviare dati tramite il routing senza mostrare nell'URL.

Plunker - working example of the same

per ulteriori informazioni leggere questo awesome artical

Vedere anche -

+0

Sono interessato a ottenere parametri (dalla stringa di query url), non impostando ... – EricC

+0

ottenendo da dove non ho ottenuto il tuo punto mi dispiace. hai un solo router rispetto a dove puoi ottenere i parametri? –

3

Dopo aver visto la risposta corretta e accettato di Günter, ho voluto aggiungere una risposta di mio (ho fatto la domanda originale).

Questo è veramente eccessivo per il mio caso: non ho il routing (ho solo una singola pagina di applicazione singola pagina), quindi devo:

  • portare in un altro componente "esterno" (RouteConfig)
  • creare un componente dedicato con il modello di router config e la base del router (con <router-outlet></router-outlet>)
  • iniettare RouteParams nel componente dove voglio utilizzare il parametro di stringa di query

E poi finalmente sono in grado di parametro di stringa di query ...

Nel mio caso (con un solo parametro), ho appena fatto questo invece one-liner (si sviluppa su 4 linee per una facile lettura):

this.myParameter = window.location.href 
    .slice(window.location.href.indexOf('?') + 1) 
    .split('&')[0] 
    .split('=')[1]; 
Problemi correlati