javascript - 如何在 Angular 2 中使用 URLSearchParams？

Question

我已经花了好几个小时试图找出如何正确地将 URLSearchParams 依赖项注入(inject)组件。

在我的 boot.ts 中，我确保包含 HTTP_PROVIDERS - 老实说，我什至不确定 URLSearchParams 是否需要它。

我还确保在我的页面中包含 http 捆绑脚本。

boot.ts

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

我试图在 FiltersService 中注入(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);
  }
}

在构造函数中注入(inject) URLSearchParams 导致错误:

我读过 this article ，实际上有几次，无法弄清楚我哪里出错了。

值得一提的是，我在尝试注入(inject) RouteParams 时遇到了同样的问题。我显然遗漏了一些基本的东西。

编辑:为了更清楚，这是我的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);
  }
}

编辑 2:这是一个 plunk这证明了我的问题 - 请参阅 peopleService.ts

Answer 1

所以在 Angular 的 Gitter 的大量研究和帮助之后，我找到了两个问题的答案。

首先，URLSearchParams不能像我试图做的那样作为依赖项注入(inject)构造函数 - 它可以是 new然而，编辑。

var params = new URLSearchParams()

它也不能像我希望的那样使用，这是为了更新位置。它似乎只是一个实用函数，用于解析查询字符串和设置查询参数，然后您可以将其与 Router 一起使用。的 navigate方法。

其次，为了访问RouteParams看来您的组件需要由 Router 实例化，即将您的组件与 @RouteConfig 中的路径相关联装饰器。

这不是我的情况，因为我有一个 <my-component></my-component>在我的应用程序的外壳中，它不是由 Router 实例化的.

这是我目前的理解，希望这能帮助其他遇到同样问题的人。