如何在Angular 2中使用URLSearchParams？

Question

我现在已经花了好几个小时试图弄清楚如何正确地将URLSearchParams依赖注入到组件中.

在我的boot.ts确保包括HTTP_PROVIDERS- 我老实说甚至不确定它是必需的URLSearchParams.

我还确保我在我的页面中包含http包脚本.

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.我显然缺少一些基本的东西.

编辑:为了更清楚,这是我的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:这是一个演示我的问题的插件 - 请参阅peopleService.ts

Answer 1

所以经过Angular的Gitter的大量研究和帮助,我找到了我的两个问题的答案.

首先,URLSearchParams不能像我想要的那样在构造函数中注入依赖项 - 但它可以被new编辑.

var params = new URLSearchParams()

它也不能用,因为我希望它可以,这是更新位置.这似乎是简单的解析查询字符串并设置查询参数,你可以再与使用效用函数Router的navigate方法.

其次,为了访问RouteParams它,您的组件似乎需要通过实例化,即将Router组件与@RouteConfig装饰器中的路径相关联.

这不是我的情况,因为我<my-component></my-component>在我的应用程序的shell中没有实例化的Router.

这是我目前的理解,希望这可以帮助其他人解决同样的问题.