Angular2: cách thao tác chuỗi truy vấn url?

Question

ở góc 1 có chức năng $location.search() có thể thao tác chuỗi truy vấn URL. Tương đương angular2 là gì?

tôi đã cố gắng

import {Location} from 'angular2/angular2'; 

và

import {URLSearchParams} from 'angular2/angular2'; 

không có may mắn.

Answer 1

trả lời ngắn (trong nguyên cảo):

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

Các tài liệu có thể được tìm thấy tại Angular2 API Docs for RequestOptions. Bạn sẽ nhận thấy rằng các search param là một loại URLSearchParams

Một ví dụ khác là trong Angular2 Guides (không nhớ những thứ JSONP, nó thường làm thế nào để sử dụng tham số truy vấn cho các yêu cầu http bình thường quá).

tham khảo để giải thích nó một cách khác nhau: How to utilise URLSearchParams in Angular 2

Ngoài ra, nếu bạn không nhập RxJS trong app.ts chức năng quan sát của bạn sẽ phá vỡ.

Ví dụ càng đầy đủ trong nguyên cảo:

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

Bạn có sử dụng kiểu chữ không? Nếu vậy, bạn có thể cần phải tham khảo các tập tin d.ts chứa typings cho angular2 với đoạn mã sau:

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

tôi đã làm một dự án nhỏ, nơi tôi có vấn đề này, webstorm sẽ không tìm thấy bất cứ điều gì từ angular2, và đánh dấu hàng nhập của tôi là lỗi. Bao gồm dòng mã này trước khi nhập từ angular2 đã giải quyết nó.

Answer 3

Làm việc dưới đây cho tôi.

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

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