2016-09-16 8 views
2

Angular2用のJQueryの$.param()関数がありますか?私は角度1は、特にそれのようなサービスがあります知っている角度2のJQueryの.param()メソッド?

Angular1 Equivalent

私は角2サイトhereをチェックしており、それらは、POSTのデモを持っていますが、それらは、要求の本体でJSONを送信します。

私の現在、非作業、

saveEdits() { 
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
    let options = new RequestOptions({ headers: headers }); 
    this._http.post("ajax/update-thingy", JSON.stringify(this.dataJson), options) 
     .map(this.extractData) 
     .toPromise() 
     .catch(this.handleError); 
    // update in Angular 1 using JQuery function 
    // $http({ 
    //  method : 'POST', 
    //  url : 'ajax/update-thingy', 
    //  data : $.param($scope.formData), 
    //  headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    // }); 
} 

extractData(res: Response) { 
    let body = res.json(); 
    if (body === 'failed') { 
     body = []; 
    } 
    return body || []; 
} 
private handleError(error: any) { 
    // In a real world app, we might use a remote logging infrastructure 
    // We'd also dig deeper into the error to get a better message 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 

    return Promise.reject(errMsg); 
} 

をしようか、それは私のAngular2でのjQueryを取得することが容易であれば、多分それが進むべき道です。

UPDATE

私は自分の問題を解決しました。私の答えbelowを見てください!

答えて

1

私自身の問題。

ここでは、私はURLSearchParamsを角度2から使用しました。これはかなりうまくいきました。複雑ではなく使いやすい。

import { Headers, RequestOptions, Http, URLSearchParams } from '@angular/http'; 

saveEdits() { 
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
    let options = new RequestOptions({ headers: headers }); 
    let params: URLSearchParams = this.serialize(this.myObj); 
    this._http.post("ajax/update-thingy", params, options) 
     .map(this.extractData) 
     .toPromise() 
     .catch(this.handleError); 
    this.selectedBill = null; 
} 

serialize(obj: any) { 
    let params: URLSearchParams = new URLSearchParams(); 


    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      var element = obj[key]; 

      params.set(key, element); 
     } 
    } 

    return params; 
} 
+0

注意してください。URLSearchParamsはすべてのブラウザでサポートされていません。 – Ayyash

1

..だから我々は少しの回避策を行く必要が ...シリアル化機能に建てられたが、そのエクスポートされません

あなたはこのようにそれを行う可能性があります:私は解決https://plnkr.co/edit/ffoaMVbwSOIX5YNLo2ip?p=preview

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import { DefaultUrlSerializer, UrlSegment, UrlTree } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>{{way1}}</h2> 
     <h2>{{way2}}</h2> 
    </div> 
    `, 
}) 
export class App { 

    private way1: string; 
    private way2: string; 

    constructor() { 

    let myParams = {you: 'params', will: 'be', here: '!!'}; 

    // way 1 
    let serializer = new DefaultUrlSerializer(); 
    let nackedUrlTree = serializer.parse(''); 
    nackedUrlTree.queryParams = myParams; 

    this.way1 = 'way1: ' + serializer.serialize(nackedUrlTree); 

    // way 2 
    let urlSeg = new UrlSegment('', myParams); 

    this.way2 = 'way2: ' + urlSeg; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 
+0

非常に滑らかなやり方です!私はおそらく 'way1'を使用したでしょう。ありがとう、相棒! –

+0

ニース!あなたは2番目の方法でコンマを見逃していたので、新しいUrlSegment( ''、myParams); –