CODEWITHSUNDEEP
javascriptangularhttp
garethdn
garethdn

Reputation: 12351

How to utilise URLSearchParams in Angular 2?

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 making sure to include HTTP_PROVIDERS - I'm honestly not even sure it's required for URLSearchParams.

I've also ensured that I'm including the http bundle script in my page.

boot.ts

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  PanelsService,
  FiltersService
])

It is FiltersService where I'm attempting to inject URLSearchParams.

filter.service.ts

import {Component, Injectable} from 'angular2/core';
import {URLSearchParams} from 'angular2/http';

@Injectable()
export class FiltersService {

  constructor(private _searchParams:URLSearchParams) { }

  setFilter(name, value) {
    this._searchParams.set(name, value);
  }

  getFilter(name) {
    this._searchParams.get(name);
  }
}

Injecting URLSearchParams in the constructor causes the error:

enter image description here

I've read this article, a couple of times in fact and can't figure out where I'm going wrong.

For what it's worth, I encounter the same problem when attempting to inject RouteParams. I'm clearly missing something fundamental.

EDIT: For some more clarity, this is what my StoriesComponent looks like:

import {Component, OnInit} from 'angular2/core';
import {PanelsService} from '../panels/panels.service';
import {RouteParams} from 'angular2/router';
import {FiltersService} from '../common/filters.service';

@Component({
  selector: 'stories',
  templateUrl: 'app/components/stories/stories.component.html'
})
export class StoriesComponent implements OnInit {

  constructor(public panelsService:PanelsService,
    public filtersService: FiltersService,
    private _routeParams:RouteParams) {

    this.panelsService.setSelectedPanel(this._routeParams.params['panelId']);
  }

  ngOnInit() {
    console.log('Stories');
  }

  addPanel() {
    var newPanel = {
      id: 999,
      name: 'my new panel name',
      time: 744
      // time: 168
    }

    this.panelsService.addPanel(newPanel);
  }
}

EDIT 2: Here's a plunk which demonstrates my issue - see peopleService.ts

Upvotes: 16

Views: 14214

Answers (2)

garethdn
garethdn

Reputation: 12351

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.

Upvotes: 15

Thierry Templier
Thierry Templier

Reputation: 202156

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

Upvotes: 1

Related Questions