kątowa 2 Błąd: Nie można rozwiązać wszystkie parametry dla „RouteParams”

Question

Próba użycia RouteParams uzyskać parametry ciąg kwerendy, ale ja po prostu pojawia się błąd

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.......

Sprawdź tę Plnkr. Jak mogę korzystać z RouteParams bez otrzymania tego ostrzeżenia?

ważnych plików są:

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]); 

i 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'); 
    } 

} 

Aktualizacja:

ja nie mam żadnych tras, po prostu mieć domyślną trasę główną (jeśli w ogóle można ją nazwać trasą, gdy nie mam innych tras ...). Ale jak sugeruje Gianluca, dodałem następujące config trasy:

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

ale wciąż otrzymuję ten sam błąd (the Plnkr jest aktualizowany) ...

Answer 1

Usuń RouteParams z

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]); 

RouteParams jest przez router. Jeśli podasz to samemu, wstrzyknięcie nie powiedzie się.

Przykładem jest https://angular.io/api/router/Params. RouteParams może być wstrzykiwany tylko na komponenty dodane przez router.

Plunker example

Answer 2

Czy określony guid w @RouteConfig?

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

Answer 3

nie jestem zrozumieć ci problemu poprawnie, ale tak jak powiedział w komentarzu

Is there another way of getting the url query params?

niż możemy wysłać za pośrednictwem korzystania data własność możemy wysyłać dane poprzez routing użyciem data własność @RouteConfig annotation dostarczone przez angualr2. za pomocą tej właściwości możemy wysyłać dodatkowe dane do komponentów w czasie konfiguracji trasy bez pokazywania jej w adresie URL. Oto przykład tej właściwości.

@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')); 
    } 
} 

za pomocą tego możemy wysyłać dane przez routing bez wyświetlania w adresie URL.

Plunker - working example of the same

uzyskać więcej informacji przeczytaj ten awesome artical

patrz także -

• Router Parameter in Angular2

Answer 4

Po obejrzeniu prawidłowego i zaakceptowane odpowiedź Günter, chciałem dodać odpowiedź mojego (zadałem oryginalne pytanie).

To naprawdę przesada za moim przypadku: nie mam routing (mam tylko jedna strona aplikacji pojedynczej strony), więc muszę:

• przynieść w innym „zewnętrznej” składnik (RouteConfig)
• utworzyć dedykowany komponent z szablonem konfiguracyjnym routera i podstawowego routera (z <router-outlet></router-outlet>)
• wstrzyknąć RouteParams w składniku gdzie chcę użyć parametru ciąg kwerendy

I wreszcie jestem w stanie parametru ciąg kwerendy ...

W moim przypadku (z tylko jednego parametru), zamiast po prostu to zrobił jeden-liner (rozłożone na 4 linie ułatwiające czytanie):

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