Jak wykorzystać URLSearchParams w Angular 2

Question

Jestem już godzinami próbuje dowiedzieć się, jak prawidłowo wstrzyknąć zależność URLSearchParams w komponent.

W moim boot.ts upewniam się, że obejmuje HTTP_PROVIDERS - szczerze mówiąc, nie jestem nawet pewien, czy jest to wymagane dla URLSearchParams.

Zapewniłem również, że dołączam skrypt pakujący http na mojej stronie.

boot.ts

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

Jest FiltersService gdzie jestem usiłujące wstrzyknąć 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); 
    } 
} 

Wstrzykiwanie URLSearchParams w konstruktora powoduje błąd:

Czytałem this article, kilka razy w rzeczywistości i nie wiem, gdzie idę źle.

Dla tego, co jest warte, napotykam ten sam problem przy próbie wstrzyknięcia RouteParams. Brakuje mi czegoś fundamentalnego.

EDIT: Od pewnego większej jasności, to co moja StoriesComponent wygląda następująco:

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: Oto plunk który demonstruje mój problem - patrz peopleService.ts

Answer 1

Więc po wielu badań i pomocy kątowego za Gitter, Znalazłem się odpowiedź na dwóch moich problemów.

Po pierwsze, URLSearchParams nie można wstrzyknąć w konstruktorze jako zależność, jak próbuję to zrobić - może to być jednak new ed.

var params = new URLSearchParams()

również nie może być stosowany jako Miałem nadzieję, że to będzie, co było zaktualizować lokalizację. Wydaje się, że jest to po prostu funkcja użyteczna do analizowania łańcuchów zapytań i ustawiania parametrów zapytań, które można następnie wykorzystać przy pomocy metody Router.

Po drugie, w celu uzyskania dostępu do RouteParams wydaje się, że składnik należy wystąpienia przez Router, to kojarząc składnik ze ścieżką w @RouteConfig dekoratora.

To nie był mój przypadek, ponieważ miałem <my-component></my-component> w powłoce mojej aplikacji, która nie została utworzona przez Router.

To jest moje obecne zrozumienie i mam nadzieję, że pomoże to innym osobom z tym samym problemem.

Answer 2

zrobiłem pracę wstrzyknięcie RouteParams w Angular2 beta0. Którą wersję używasz?

Po prostu trzeba określić trasy globalnie dla dostawców aplikacji jak ty:

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

Następnie wystarczy zaimportować RouteParams gdzie chcesz go używać i dodać go w konstruktorze komponentu. Kątowej daje odpowiednią instancję:

import { RouteParams } from 'angular2/router'; 

export class CompanyDetails implements OnInit { 
    public company: Company; 

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

Od określić globalnie, nie trzeba określić go ponownie w ciągu atrybutu dostawców części:

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

W przeciwnym razie, co prawda dokładnie chcesz zrobić z klasą URLSearchParams?

Nadzieję, że to pomaga, Thierry