How to utilise URLSearchParams in Angular 2?

Question

I\'ve been hours now trying to figure out how to correctly inject the URLSearchParams dependency into a component.

In my boot.ts I\'m makin

Answer 1

So after a lot of research and help from Angular's Gitter, I've found out the answer to two of my problems.

Firstly, URLSearchParams cannot be injected in the constructor as a dependency like I'm trying to do - it can be newed however.

var params = new URLSearchParams()

It also cannot be used as I was hoping it could be, which was to update the location. It appears to be simply a utility function for parsing query strings and setting query params which you can then use with Router's navigate method.

Secondly, in order to access RouteParams it appears that your component needs to be instantiated by the Router, i.e. associating your component with a path in a @RouteConfig decorator.

This was not my case as I had a <my-component></my-component> in the shell of my application which was not instantiated by the Router.

This is my current understanding and hopefully this helps others with the same problem.

Answer 2

I made work the injection of RouteParams within Angular2 beta0. Which version do you use?

We simply need to specify route providers globally for your application as you did:

import {ROUTER_PROVIDERS} from 'angular2/router';
(...)
bootstrap(ApisparkApp, [
  (...)
  ROUTER_PROVIDERS
]);

Then simply import RouteParams where you want to use it and add it in the constructor of your component. Angular will give you the corresponding instance:

import { RouteParams } from 'angular2/router';

export class CompanyDetails implements OnInit {
  public company: Company;

  constructor(routeParams: RouteParams) {
    this.routeParams = routeParams;
  }
}

Since you specify it globally, you don't need to specify it again within the providers attribute of the component:

@Component({
  selector: 'company-details',
  providers: [ CompanyService ]
})

Otherwise, what do you exactly want to do with class URLSearchParams?

Hope it helps you, Thierry