So verwenden Sie URLSearchParams in Angular 2

Question

Ich habe Stunden damit verbracht, herauszufinden, wie man die URLSearchParams Abhängigkeit in eine Komponente korrekt injiziert.

In meiner boot.ts stelle ich sicher, dass HTTP_PROVIDERS enthalten - ich bin ehrlich gesagt nicht einmal sicher, dass es für URLSearchParams erforderlich ist.

Ich habe auch sichergestellt, dass ich das http-Bundle-Skript in meiner Seite einschließen.

boot.ts

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

Es ist FiltersService wo ich URLSearchParams zu injizieren bin versucht.

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 im Konstruktor Injektion verursacht den Fehler:

I this article, ein paar Mal in der Tat gelesen habe und kann nicht herausfinden, wo ich falsch liege.

Für was es wert ist, stoße ich auf das gleiche Problem beim Versuch, RouteParams zu injizieren. Mir fehlt eindeutig etwas Grundlegendes.

EDIT: Für etwas mehr Klarheit ist das, was meine StoriesComponent wie folgt aussieht:

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: Hier ein plunk ist das mein Problem demonstriert - siehe peopleService.ts

Answer 1

So nach viel Forschung und Hilfe von Winkel der Gitter, ich habe die Antwort auf zwei meiner Probleme herausgefunden.

Erstens kann URLSearchParams nicht in den Konstruktor als eine Abhängigkeit injiziert werden, wie ich es versuche - es kann new Ed aber sein.

var params = new URLSearchParams()

Es ist auch, wie ich es gehofft werden kann, nicht verwendet wurde, konnte, die den Standort zu aktualisieren war. Es scheint einfach eine Dienstprogrammfunktion zum Analysieren von Abfragezeichenfolgen und zum Festlegen von Abfrageparametern zu sein, die Sie dann mit Routers navigate Methode verwenden können.

Zweitens, um auf RouteParams zuzugreifen scheint es, dass Ihre Komponente von Router instanziiert werden muss, d. H. Ihre Komponente mit einem Pfad in einem @RouteConfig Decorator verknüpfen.

Dies war nicht mein Fall, wie ich eine <my-component></my-component> in der Shell meiner Anwendung hatte, die nicht durch die Router instanziiert wurde.

Dies ist mein derzeitiges Verständnis und hoffentlich hilft dies anderen mit dem gleichen Problem.

Answer 2

ich Arbeit gemacht die Injektion von RouteParams in Angular2 beta0. Welche Version verwendest du?

Wir müssen einfach Route Provider weltweit für Ihre Anwendung angeben, wie Sie tat:

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

Dann einfach importieren RouteParams wo möchten Sie es verwenden und es im Konstruktor Ihrer Komponente hinzuzufügen. Angular finden Sie die entsprechende Instanz geben:

import { RouteParams } from 'angular2/router'; 

export class CompanyDetails implements OnInit { 
    public company: Company; 

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

Da Sie es global angeben, müssen Sie es in der Anbieter-Attribut der Komponente wieder nicht angeben:

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

Ansonsten, was tun Sie genau mit Klasse URLSearchParams zu tun?

Hoffe, es hilft Ihnen, Thierry