Angular2: Wie manipuliert man Url Query String?

Question

in Winkel 1 gibt es eine $location.search() Funktion, die URL-Abfrage Zeichenfolge manipulieren kann. Was ist das angular2-Äquivalent?

Ich versuchte

import {Location} from 'angular2/angular2'; 

und

import {URLSearchParams} from 'angular2/angular2'; 

ohne Glück.

Answer 1

Kurze Antwort (in Typoskript):

// Import you were looking for 
import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http'; 
//... jump down some code 
export class MyRegistrationsComponent { 
    constructor(private http: Http) { } 

    getDudesAndDudettes() { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ 
      headers: headers, 
      // Have to make a URLSearchParams with a query string 
      search: new URLSearchParams('firstName=John&lastName=Smith}') 
     }); 

     return this.http.get('http://localhost:3000/MyEventsAPI', options) 
      .map(res => <Dudes[]>res.json().data) 
    } 

Die docs können Angular2 API Docs for RequestOptions finden. Sie werden feststellen, dass die search param eine Art von URLSearchParams

Ein weiteres Beispiel in der Angular2 Guides ist (es die JSONP Zeug nichts dagegen, es in der Regel, wie auch Abfrageparameter für normale HTTP-Anfragen verwenden).

Referenz es eine andere Art und Weise zu erklären: How to utilise URLSearchParams in Angular 2

Auch wenn Sie nicht RxJS in Ihrer app.ts beobachtbaren Funktionalität brechen importiert wurden.

vollständigeres Beispiel in Typoskript:

import {Component}  from 'angular2/core'; 
import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http'; 
import {Registrant}  from './registrant'; 
import {Registration} from './registration'; 
import {Observable}  from 'rxjs/Observable'; 

@Component({ 
    selector: 'my-registrations', 
    templateUrl: 'app/my-registrations.component.html', 
    inputs: ['registrant'] 
}) 

export class MyRegistrationsComponent { 
    constructor(private http: Http) { } 

    private _registrantionsUrl: string = 'http://localhost:3000/MyEventsAPI'; 
    private _title = 'My Registrations Search'; 
    public registrant: Registrant = { firstName: "John", lastName: "Smith" }; 

    findMyEvents() { 
     let body = JSON.stringify(this.registrant); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ 
      headers: headers, 
      search: new URLSearchParams(`firstName=${this.registrant.firstName}&lastName=${this.registrant.lastName}`) 
     }); 

     return this.http.get(this._registrantionsUrl, options) 
      .toPromise() 
      .then(res => <Registration[]>res.json().data) 
      .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 

} 

Answer 2

Verwenden Sie Typoskript? Wenn ja, müssen Sie möglicherweise die d.ts Datei mit den Typisierungen für angular2 mit dem folgenden Code verweisen:

/// <reference path="typings/angular2/angular2.d.ts" /> 

ich ein kleines Projekt tat, wo ich dieses Problem hatte, WebStorm nichts von angular2 finden würde, und markieren Sie meine Importe als Fehler. Das Einfügen dieser Codezeile vor dem Import aus eckig2 löste es.

Answer 3

Unten arbeitete für mich.

@Component({ 
    selector: 'start' 
}) 
@View({ 
    template: `<h1>{{name}}</h1>` 
}) 
export class Start { 
    name: string; 

    constructor(routeParams: RouteParams){ 
     this.name = 'Start' + routeParams.get('x'); 
    } 
}