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

我已经工作了几个小时，试图弄清楚如何将URLSearchParams依赖项正确地注入(inject)到组件中。

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

我还确保在页面中包含http bundle脚本。

boot.ts

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

我尝试在其中注入(inject)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);
  }
}

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



我实际上已经读过this article几次，无法弄清楚我要去哪里。

对于它的值(value)，尝试注入(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

最佳答案

因此，经过Angular Gitter的大量研究和帮助，我找到了解决我两个问题的答案。

首先，URLSearchParams不能像我想做的那样作为依赖项注入(inject)到构造函数中-但是它可以被new编辑。
var params = new URLSearchParams()
它也不能像我希望的那样使用，它是用来更新位置的。它似乎只是一个用于解析查询字符串和设置查询参数的实用程序函数，然后可以将其与Router的navigate方法一起使用。

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

这不是我的情况，因为我的应用程序 shell 中有一个<my-component></my-component>，但没有通过Router实例化。

这是我目前的理解，希望对其他有相同问题的人有所帮助。

关于javascript - 如何在Angular 2中利用URLSearchParams？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34386367/