Angular2:如何处理url查询字符串? [英] Angular2: how to manipulate url query string?

问题描述

在角度1中，有一个$location.search()函数可以操纵URL查询字符串.什么是angular2等效项?

in angular 1 there is a $location.search() function which can manipulate URL query string. What is the angular2 equivalent?

我尝试了

import {Location} from 'angular2/angular2';

和

import {URLSearchParams} from 'angular2/angular2';

没有运气.

推荐答案

简短答案(在TypeScript中):

Short Answer (in 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文档中找到该文档for RequestOptions .您会注意到search参数是 URLSearchParams

The docs can be found at Angular2 API Docs for RequestOptions. You will notice that the search param is a type of URLSearchParams

另一个示例在 Angular2指南中(不要介意JSONP的东西，通常也是通常的http请求也要使用查询参数的方式.)

Another example is in the Angular2 Guides (don't mind the JSONP stuff, it's generally how to use query parameters for normal http requests too).

参考文献以另一种方式进行解释:如何利用Angular 2中的URLSearchParams

Reference to explain it a different way: How to utilise URLSearchParams in Angular 2

此外，如果您未导入 RxJS 在您的app.ts可观察功能中会损坏.

Also, if you didn't import RxJS in your app.ts observable functionality will break.

TypeScript中的更多完整示例:

More Complete Example in 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');
    }

}

这篇关于Angular2:如何处理url查询字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！