如何将JSON转换为angular2中的查询字符串？

Question

我是 Angular2 的新手。我有一个 JSON 对象，如下所示：

var options = {
  param1: "parama1",
  param2: "parama2",
  param3: "parama3"
};

应转换为查询字符串并附加到外部 URL 以重定向页面，如下所示：

ngOnInit(){
     window.location.href = someurl?param1=param1&param2=param2&param3=param3;
}

我正在寻找一种将其转换为查询字符串的方法。在 JQuery 中，$.param() 和 AngularJS 中的 $httpParamSerializerJQLike() 就是为此而生的。我搜索过，但我什么也没有。我想知道有没有办法在angular2中做到这一点。

Answer 1

没有字符串 concats 的更“官方”的方法：

import {URLSearchParams} from '@angular/http'
let options = {
  param1: "param1",
  param2: "param2",
  param3: "param3"
};

let params = new URLSearchParams();
for(let key in options){
    params.set(key, options[key]) 
}

console.log("http://someUrl?" + params.toString());

顺便说一句，这会自动编码。

Answer 2

此解决方案适用于大多数复杂类型

如果有人想知道如何做到这一点，我编写了一个扩展，它应该与 c# .Net Core 1.1 和 Typescript 2.2.2 WebApi 一起使用，看起来像这样。

记得在你使用它的地方也包含这两个导入

import { URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map'

export class QueryStringBuilder {
    static BuildParametersFromSearch<T>(obj: T): URLSearchParams {
        let params: URLSearchParams = new URLSearchParams();

        if (obj == null)
        {
            return params;
        }

        QueryStringBuilder.PopulateSearchParams(params, '', obj);

        return params;
    }

    private static PopulateArray<T>(params: URLSearchParams, prefix: string, val: Array<T>) {
        for (let index in val) {
            let key = prefix + '[' + index + ']';
            let value: any = val[index];
            QueryStringBuilder.PopulateSearchParams(params, key, value);
        }
    }

    private static PopulateObject<T>(params: URLSearchParams, prefix: string, val: T) {
        const objectKeys = Object.keys(val) as Array<keyof T>;

        if (prefix) {
            prefix = prefix + '.';
        }

        for (let objKey of objectKeys) {

            let value = val[objKey];
            let key = prefix + objKey;

            QueryStringBuilder.PopulateSearchParams(params, key, value);
        }
    }

    private static PopulateSearchParams<T>(params: URLSearchParams, key: string, value: any) {
        if (value instanceof Array) {
            QueryStringBuilder.PopulateArray(params, key, value);
        }
        else if (value instanceof Date) {
            params.set(key, value.toISOString());
        }
        else if (value instanceof Object) {
            QueryStringBuilder.PopulateObject(params, key, value);
        }
        else {
            params.set(key, value.toString());
        }
    }

}

这适用于我目前使用的所有复杂类型。

编辑 UrlSearch 参数已被删除。以下是通过@NuryagdyMustapayev 的要点更新的更改：

static buildParametersFromSearch<T>(obj: T): HttpParams {
    let params: HttpParams= new HttpParams();

    if (obj == null)
    {
        return params;
    }

    return QueryStringBuilder.populateSearchParams(params, '', obj);
}

private static populateArray<T>(params: HttpParams, prefix: string, val: Array<T>): HttpParams {
    for (let index in val) {
        let key = prefix + '[' + index + ']';
        let value: any = val[index];
        params = QueryStringBuilder.populateSearchParams(params, key, value);
    }
    return params;
}

private static populateObject<T>(params: HttpParams, prefix: string, val: T): HttpParams {
    const objectKeys = Object.keys(val) as Array<keyof T>;

    for (let objKey of objectKeys) {

        let value = val[objKey];
        let key = prefix;
        if (prefix) {
            key += '[' + objKey + ']';
        } else {
            key += objKey;
        }

        params = QueryStringBuilder.populateSearchParams(params, key, value);
    }
    return params;
}

private static populateSearchParams<T>(params: HttpParams, key: string, value: any): HttpParams {
    if (value instanceof Array) {
        return QueryStringBuilder.populateArray(params, key, value);
    }
    else if (value instanceof Date) {
        return params.append(key, value.toISOString());
    }
    else if (value instanceof Object) {
        return QueryStringBuilder.populateObject(params, key, value);
    }
    else if ('undefined' !== typeof value && null !== value){
        return params.append(key, value.toString());
    }
    return params;
}

记得从“@angular/common/http”导入{HttpParams}；

Answer 3

这个怎么样：

ngOnInit(){
    let options = {
      param1: "param1",
      param2: "param2",
      param3: "param3"
    };

    let myQuery = 'http://someurl?'
    for (let entry in options) {
        myQuery += entry + '=' + encodeURIComponent(options[entry]) + '&';
    }

    // remove last '&'
    myQuery = myQuery.substring(0, myQuery.length-1)

    window.location.href = myQuery;
}

myQuery 的值为?param1=param1&param2=param2&param3=param3。

Answer 4

您可以使用HttpParams

import { HttpParams } from '@angular/common/http';

new HttpParams({fromObject: yourObject}).toString()

Answer 5

我不喜欢使用任何库，你可以简单地使用地图函数来创建它。

所以这就是这个案例的用途：

const params= {
 param1:"value1",
 param2:"value2",
 param2:"value2",
};

const queryStr = Object.keys(params).map((el)=>( `${el}=${params[el]}` )).join("&");

这是输出：param1=value1&param2=value2