Angular2: как манипулировать строку запроса url?

Ответ 1

Короткий ответ (в TypeScript):

// 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)
  }

Документы можно найти в Angular2 API Docs для RequestOptions. Вы заметите, что параметр search является типом URLSearchParams

Другой пример приведен в Angular2 Guides (не обращайте внимания на материал JSONP, обычно как использовать параметры запроса для нормального HTTP-запросы тоже).

Ссылка, чтобы объяснить это по-другому: Как использовать URLSearchParams в Angular 2

Кроме того, если вы не импортировали RxJS в свой app.ts, наблюдаемая функциональность сломается.

Более полный пример в TypeScript:

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');
    }

}

Ответ 2

Ниже работал у меня.

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

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

Ответ 3

Используете ли вы typescript? Если это так, вам может потребоваться ссылаться на файл d.ts, содержащий типовые обозначения для angular2, с помощью следующего кода:

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

Я сделал небольшой проект, где у меня была эта проблема, webstorm не нашел ничего из angular2 и выделил мой импорт как ошибки. Включая эту строку кода перед импортом из angular2, решила ее.