Как использовать URLSearchParams в Angular 2

Я уже часами пытаюсь понять, как правильно ввести зависимость URLSearchParams в компонент.

В моем boot.ts я обязательно включу HTTP_PROVIDERS - я честно даже не уверен, что это требуется для URLSearchParams.

Я также гарантировал, что я включу http-пакет script на моей странице.

boot.ts

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

Это FiltersService, где я пытаюсь ввести 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);
  }
}

Инъекция URLSearchParams в конструкторе вызывает ошибку:

Я прочитал эту статью, пару раз на самом деле и не могу понять, где я ошибаюсь.

Для чего это стоит, я сталкиваюсь с той же проблемой при попытке ввести RouteParams. Мне явно не хватает чего-то фундаментального.

EDIT. Для большей ясности это выглядит как < StoriesComponent:

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: здесь plunk, который демонстрирует мою проблему - см. peopleService.ts

Ответ 1

Итак, после большого исследования и помощи от Angular Gitter, я узнал ответ на две из моих проблем.

Во-первых, URLSearchParams не может быть введен в конструкторе как зависимость, как я пытаюсь сделать - это может быть new ed.

var params = new URLSearchParams()

Он также не может использоваться, поскольку я надеялся, что это может произойти, что должно было обновить местоположение. Это просто функция утилиты для синтаксического анализа строк запроса и установки параметров запроса, которые затем можно использовать с помощью метода Router navigate.

Во-вторых, для доступа к RouteParams кажется, что ваш компонент должен быть создан Router, т.е. связывает ваш компонент с контуром в декораторе @RouteConfig.

Это был не мой случай, поскольку в оболочке моего приложения был <my-component></my-component>, который не был создан Router.

Это мое настоящее понимание и, надеюсь, это помогает другим с той же проблемой.

Ответ 2

Я сделал работу с инъекцией RouteParams в пределах Angular2 beta0. Какую версию вы используете?

Нам просто нужно указать поставщиков маршрутов по всему миру для вашего приложения, как вы это делали:

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

Затем просто импортируйте RouteParams, где вы хотите его использовать, и добавьте его в конструктор вашего компонента. Angular предоставит вам соответствующий экземпляр:

import { RouteParams } from 'angular2/router';

export class CompanyDetails implements OnInit {
  public company: Company;

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

Поскольку вы укажете его глобально, вам не нужно указывать его снова в атрибуте поставщиков компонента:

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

В противном случае, что вы точно хотите сделать с классом URLSearchParams?

Надеюсь, это поможет вам, Thierry