JSgular angular2 sorgu dizesi dönüştürmek nasıl?

Question

Angular2'ye yeni geliyorum. dize sorgulamak ve harici bir URL'ye eklenecek dönüştürmek gerekir

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

aşağıda sanki sayfanın yönlendirmek için:

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

Bir yol arıyorum ben aşağıdaki gibi bir JSON nesnesi var sorgu dizesine dönüştür. JQuery'de $.param() ve AngularJS $httpParamSerializerJQLike()'da bunun için vardır. Aramıştım ama hiçbir şeyim yok. Bilmek istiyorum angular2 yapmak için herhangi bir yolu var. Bu konuda

Answer 1

bir daha 'resmi' yöntemi: bu arada

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()); 

Bu does otomatik kodlama.

Answer 2

Nasıl:

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 değeri ?param1=param1&param2=param2&param3=param3 olduğunu. dize concats olmadan

Answer 3

Bu çözüm

Örtmek herkes bunun nasıl merak , ben C# .Net Çekirdek 1.1 ve böylece benziyor typescript 2.2.2 WebAPI ile çalışmalıdır bir uzantı yazdım en karmaşık türleri

ile çalışacaktır .

siz de

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()); 
     } 
    } 

} 

Bu defa kullandım tüm karmaşık türleri için çalışıyor bunu kullanıyor nerede bu iki ithalatı eklemeyi unutmayın.