typescript 如何将 JSON 转换为 angular2 中的查询字符串？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41761523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert JSON to query string in angular2?
提问by Sivaprasad derangula
I'm new to Angular2. I have a JSON object, as below:
我是 Angular2 的新手。我有一个 JSON 对象，如下所示：
var options = {
param1: "parama1",
param2: "parama2",
param3: "parama3"
};
which should convert to query string and append to an external URL to redirect the page like below:
它应该转换为查询字符串并附加到外部 URL 以重定向页面，如下所示：
ngOnInit(){
window.location.href = someurl?param1=param1¶m2=param2¶m3=param3;
}
I'm looking for a way to convert it to query string. In JQuery, $.param()and in AngularJS $httpParamSerializerJQLike()are there for this. I'd searched, but I got nothing. I want to know is there any way to do it in angular2.
我正在寻找一种将其转换为查询字符串的方法。在 JQuery$.param()和 AngularJS 中，$httpParamSerializerJQLike()都可以做到这一点。我搜索过，但一无所获。我想知道有没有办法在 angular2 中做到这一点。
回答by MikeOne
A more 'official' method without the string 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());
This does automatic encoding by the way.
顺便说一下，这是自动编码的。
回答by johnny 5
This solution will work with most complex types
此解决方案适用于最复杂的类型
Incase anyone was wondering how to do this, I've written an extension that should work with c# .Net Core 1.1 and Typescript 2.2.2 WebApi which looks like so.
如果有人想知道如何做到这一点，我已经编写了一个应该与 c# .Net Core 1.1 和 Typescript 2.2.2 WebApi 一起使用的扩展，看起来像这样。
Remember to include these two imports where you are using it as well
请记住在您使用它的地方也包含这两个导入
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());
}
}
}
This is working for all the complex types I've used so far.
这适用于我迄今为止使用的所有复杂类型。
回答by AArias
How about this:
这个怎么样：
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;
}
myQueryvalue is ?param1=param1¶m2=param2¶m3=param3.
myQuery价值是?param1=param1¶m2=param2¶m3=param3。
