Angular 2 error: Cannot resolve all parameters for 'RouteParams'

问题

Trying to use RouteParams to get query-string parameters, but I just get the error

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

Check out this Plnkr. How can I use RouteParams without getting this warning?

The important files are:

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

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

}

Update:

I am not having any routes, I just have the default root route (if that can be called a route at all when I have no other routes...). But as suggested by Gianluca, I added the following route config:

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

But I still get the same error (the Plnkr is updated)...

回答1:

Remove RouteParams from

bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);

RouteParams is provided by the router. If you provide it yourself injecting it fails.

See https://angular.io/api/router/Params for an example. RouteParams can only be injected on components added by the router.

Plunker example

回答2:

After seeing the correct and accepted answer to Günter, I wanted to add an answer of my own (I asked the original question).

This is really overkill for my case: I have no routing (I have only a single page single page application), so I must:

bring in another "external" component (RouteConfig)
create a dedicated component with the router config and router base template (with <router-outlet></router-outlet>)
inject RouteParams in the component where I want to use the query string parameter

And then finally I am able to the query string parameter...

In my case (with just one parameter), I just instead did this one-liner (spread over 4 lines for easy reading):

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

回答3:

Have you specified guid in the @RouteConfig?

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

回答4:

i am not understand you problem correctly but yes as you said in comment

Is there another way of getting the url query params?

Than we can send via using data property we can send data via routing using data property of the @RouteConfig annotation provided by angualr2. by using this property we can send additional data to the components at the time of the route configuration without showing it in the URL. here is example of this property.

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

by using this we can send data via routing without showing in the URL.

Plunker - working example of the same

for more info read this awesome artical