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

Question

в угловом 1 есть функция $location.search(), которая может манипулировать строкой запроса URL. Что такое угловой эквивалент?

Я попытался

import {Location} from 'angular2/angular2'; 

и

import {URLSearchParams} from 'angular2/angular2'; 

не повезло.

Answer 1

Короткий ответ (в машинописном):

// 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 for RequestOptions. Вы заметите, что search парам является типом URLSearchParams

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

Ссылка объяснить это по-другому: How to utilise URLSearchParams in Angular 2

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

Более полный пример в машинописи:

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

Вы используете машинопись? Если да, то вам, возможно, придется ссылаться на файл, содержащий d.ts типизации для angular2 со следующим кодом:

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

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

Answer 3

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

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

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