พารามิเตอร์แบบสอบถาม HttpClient เชิงมุม 4

ฉันได้รับการมองหาวิธีที่จะผ่านพารามิเตอร์การค้นหาเป็นเรียก API กับใหม่HttpClientModule's HttpClientและยังไม่พบวิธีการแก้ปัญหา ด้วยHttpโมดูลเก่าคุณจะเขียนอะไรแบบนี้

getNamespaceLogs(logNamespace) {

    // Setup log namespace query parameter
    let params = new URLSearchParams();
    params.set('logNamespace', logNamespace);

    this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params })
}

ซึ่งจะส่งผลให้มีการเรียก API ไปยัง URL ต่อไปนี้:

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

อย่างไรก็ตามHttpClient get()วิธีการใหม่ไม่มีsearchคุณสมบัติดังนั้นฉันสงสัยว่าจะส่งผ่านพารามิเตอร์การสืบค้นได้อย่างไร

ฉันพบการค้นหาผ่าน IntelliSense ในget()ฟังก์ชั่น ดังนั้นฉันจะโพสต์ไว้ที่นี่สำหรับใครก็ตามที่กำลังมองหาข้อมูลที่คล้ายกัน

อย่างไรก็ตามไวยากรณ์เกือบจะเหมือนกัน แต่แตกต่างกันเล็กน้อย แทนการใช้URLSearchParams()พารามิเตอร์ที่จะต้องมีการเริ่มต้นเป็นHttpParams()และทรัพย์สินภายในที่get()ฟังก์ชั่นเรียกว่าตอนนี้แทนparamssearch

import { HttpClient, HttpParams } from '@angular/common/http';

getLogs(logNamespace): Observable<any> {

    // Setup log namespace query parameter
    let params = new HttpParams().set('logNamespace', logNamespace);

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
}

ฉันชอบไวยากรณ์นี้มากกว่าพารามิเตอร์ที่ไม่เชื่อเรื่องพระเจ้า ฉันยัง refactored รหัสเพื่อให้ตัวย่อเล็กน้อย

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set('logNamespace', logNamespace)
    })
}

หลายพารามิเตอร์

วิธีที่ดีที่สุดที่ฉันได้พบคือการกำหนดParamsวัตถุที่มีพารามิเตอร์ทั้งหมดที่ฉันต้องการกำหนดภายใน @estus ชี้ให้เห็นในความคิดเห็นด้านล่างมีคำตอบที่ดีมากมายในคำถามนี้เกี่ยวกับวิธีกำหนดพารามิเตอร์หลายตัว

getLogs(parameters) {

    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    params = params.append('firstParameter', parameters.valueOne);
    params = params.append('secondParameter', parameters.valueTwo);

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

หลายพารามิเตอร์พร้อมเงื่อนไขแบบลอจิก

สิ่งที่ฉันมักทำกับพารามิเตอร์หลายตัวคืออนุญาตให้ใช้หลายพารามิเตอร์โดยไม่ต้องมีการแสดงตนในทุกการโทร การใช้ Lodash นั้นง่ายมากที่จะเพิ่ม / ลบพารามิเตอร์จากการเรียกไปยัง API ฟังก์ชั่นที่แน่นอนที่ใช้ใน Lodash หรือ Underscores หรือวานิลลา JS อาจแตกต่างกันไปขึ้นอยู่กับแอปพลิเคชันของคุณ แต่ฉันได้พบว่าการตรวจสอบข้อกำหนดคุณสมบัติทำงานได้ค่อนข้างดี ฟังก์ชั่นด้านล่างจะส่งพารามิเตอร์ที่มีคุณสมบัติที่สอดคล้องกันภายในตัวแปรพารามิเตอร์ที่ส่งผ่านไปยังฟังก์ชั่น

getLogs(parameters) {

    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    if (!_.isUndefined(parameters)) {
        params = _.isUndefined(parameters.valueOne) ? params : params.append('firstParameter', parameters.valueOne);
        params = _.isUndefined(parameters.valueTwo) ? params : params.append('secondParameter', parameters.valueTwo);
    }

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

คุณสามารถ (ในเวอร์ชัน 5+) ใช้พารามิเตอร์ fromObjectและfromString Constructor เมื่อสร้าง HttpParamaters เพื่อทำให้สิ่งต่าง ๆ ง่ายขึ้น

    const params = new HttpParams({
      fromObject: {
        param1: 'value1',
        param2: 'value2',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

หรือ:

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2

คุณสามารถผ่านมันได้อย่างนี้

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})

โซลูชันที่กระชับยิ่งขึ้น:

this._Http.get(`${API_URL}/api/v1/data/logs`, { 
    params: {
      logNamespace: logNamespace
    } 
 })

ด้วย Angular 7 ฉันทำให้มันทำงานได้โดยใช้สิ่งต่อไปนี้โดยไม่ใช้ HttpParams

import { HttpClient } from '@angular/common/http';

export class ApiClass {

  constructor(private httpClient: HttpClient) {
    // use it like this in other services / components etc.
    this.getDataFromServer().
      then(res => {
        console.log('res: ', res);
      });
  }

  getDataFromServer() {
    const params = {
      param1: value1,
      param2: value2
    }
    const url = 'https://api.example.com/list'

    // { params: params } is the same as { params } 
    // look for es6 object literal to read more
    return this.httpClient.get(url, { params }).toPromise();
  }
}

หากคุณมีวัตถุที่สามารถแปลงเป็น{key: 'stringValue'}คู่คุณสามารถใช้ทางลัดนี้เพื่อแปลง:

this._Http.get(myUrlString, {params: {...myParamsObject}});

ฉันรักไวยากรณ์การแพร่กระจาย!

joshrathke ถูกต้อง

ใน angular.io เอกสารเขียนไว้ว่าURLSearchParams จาก @ เชิงมุม / http เลิก แต่คุณควรใช้HttpParams จาก @ รหัสค่อนข้างคล้ายคลึงกันและเหมือนกับสิ่งที่ joshrathke เขียน สำหรับพารามิเตอร์หลายตัวที่ถูกบันทึกไว้เช่นในวัตถุเช่น

{
  firstParam: value1,
  secondParam, value2
}

คุณสามารถทำได้

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}

หากคุณต้องการคุณสมบัติที่สืบทอดมาให้ลบ hasOwnProperty ตามลำดับ

ค้นหาทรัพย์สินของประเภทURLSearchParamsในRequestOptionsชั้นจะเลิกในเชิงมุม 4. แต่คุณควรใช้paramsทรัพย์สินของประเภทURLSearchParams