web-dev-qa-db-ja.com

JSONをangular2のクエリ文字列に変換する方法は？

私は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でそれを行う方法はありますか？.

jsonangulartypescriptquery-string
13
Sivaprasad derangula

文字列連結のない、より「公式」な方法：

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

これにより、自動エンコードが行われます。

45
MikeOne

このソリューションは、ほとんどの複雑なタイプで動作します

誰かがこれを行う方法を疑問に思っている場合に備えて、C＃.Net Core 1.1およびTypeScript 2.2.2 WebApiで動作する拡張機能を作成しました。

これら2つのインポートも使用する場所に含めるようにしてください。

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

}

これは、これまで使用してきたすべての複雑なタイプで機能します。

6
johnny 5

これはどう：

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。

1
AArias