Как преобразовать 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() есть для этого. Я обыскал, но ничего не получил. Я хочу знать, есть ли способ сделать это в угловой2.

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

Как об этом:

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 3

Это решение будет работать с большинством сложных типов

Incase кто-нибудь задавался вопросом, как сделать это, я написал расширение, которое должно работать с C# .NET 1.1 Ядра и машинопись 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()); 
     } 
    } 

} 

Это работает для всех сложных типов, которые я использовал до сих пор.