Wie konvertieren von JSON-Abfragen string in angular2?

Ich bin neu Angular2. Ich habe ein JSON-Objekt, wie folgt:

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

sollte konvertieren query-string und fügen Sie zu einer externen URL umzuleiten, die Seite wie folgt:

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

Ich bin auf der Suche nach einem Weg, es zu konvertieren, um query-string. In JQuery, $.param() und in AngularJS $httpParamSerializerJQLike() gibt es für diese. Ich hatte gesucht, aber ich bekam nichts. Ich möchte wissen, gibt es eine Möglichkeit, es zu tun in angular2.

Möglich, Duplikat der gewusst Wie: übergeben Sie die url-Argumente (query-string) auf eine HTTP-Anfrage an Winkel 2
Ich will nicht zu nennen, alle HTTP-get oder post. Ich werde mich ändern das Fenster.Lage.href.
Sie haben sich in diesem answer
Ich will nicht zu nennen, alle HTTP-get oder post. Ich werde mich ändern das Fenster.Lage.href.

InformationsquelleAutor Sivaprasad derangula | 2017-01-20

  1. 42

    Mehr "offizielle" Methode ohne den 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());

    Diesem funktioniert die automatische Kodierung durch die Art und Weise.

    Ich mag diese Antwort ist besser als meine, gut.
    Ich lehnte den vorgeschlagenen Bearbeiten. Die Parameter sind bereits URLEncoded wenn Sie diese Methode verwenden.
    Ich habe es, aber es gibt keine Möglichkeit, zurückzukehren.
    Zur info: Bis vor kurzem URLSearchParams braucht ein polyfill korrekt verwendet werden, die in einigen Browsern (IE und Safari), weiß jemand, ob das geändert?
    URLSearchParams ist jetzt veraltet, zu Gunsten der HttpParams: Winkel.io/api/common/http/HttpParams

    InformationsquelleAutor MikeOne

  2. 6

    Diese Lösung funktioniert mit den meisten komplexen Typen

    Incase jemand Fragen, wie dies zu tun, die ich geschrieben habe eine Erweiterung, die sollen die Arbeit mit c# .Net Core 1.1 und Typoskript 2.2.2 WebApi, die sieht so aus.

    Denken Sie daran, diese beiden Importe, wo Sie es sind, wie auch

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

}

    Ist dies funktioniert für alle komplexen Typen, die ich bisher benutzt habe.

    Nur als Anmerkung, die Sie nennen, mit der einzigen öffentlichen Methode BuildParametersFromSearch

    InformationsquelleAutor johnny 5

  3. 1

    Wie wäre es damit:

    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 Wert ist ?param1=param1&param2=param2&param3=param3.

    wird es geben kodierten query-string??
    gerade bearbeitet die Antwort hinzufügen-Codierung
    encodeURI("param1=param1&param2=param2&param3=param4.com") ist den "param1=param1&param2=param2&param3= param4.com ", es ist kein encoding-url
    Sind Sie sicher, dass Sie die gleichen Optionen? Überprüfen Sie diese plunker: plnkr.co/Bearbeiten/VvRr4yZkKu7YHhyvaOlb?p=Album Vorhören es ist in Ordnung arbeiten (check-app.ts und die Konsole)
    legen Sie einfach eine beliebige url als ein Parameter und das Ergebnis sehen.

    InformationsquelleAutor AArias

Schreibe einen Kommentar