example - angular io http




Angular 4 HttpClient查詢參數 (6)

在Angular 7中使用URL傳遞多個參數

  component.ts File --
  --------------------------------------------------------------------------
  export class UnsubscribeComponent implements OnInit {
  email: string;
  token: string;

  constructor(private httpSvc: HttpService) {}


  ngOnInit() {
  this.httpSvc.get('pin/unsubscribe'+'? 
  email='+this.email+'&tn='+this.token).subscribe(res => {
  if (res.status === this.appConstants.ResponseCodes.success) {      
          //Do what you want
    } else {
      //Do what you want
     }
   });
 }

我一直在尋找一種方法,使用新的 HttpClientModuleHttpClient 將查詢參數傳遞給API調用,並且尚未找到解決方案。 使用舊的 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 })
}

這將導致對以下URL的API調用:

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

但是,新的 HttpClient get() 方法沒有 search 屬性,所以我想知道在哪里傳遞查詢參數?


joshrathke是對的。

在angular.io docs 中寫道, 不推薦使用來自@ angular / http的 URLSearchParams。 相反,你應該使用 @ angular / common / http中的HttpParams 。 代碼非常類似於joshrathke所寫的內容。 對於保存在例如對像中的多個參數

{
  firstParam: value1,
  secondParam, value2
}

你也可以這樣做

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

如果需要繼承屬性,則相應地刪除hasOwnProperty。


使用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}});

我只是喜歡傳播語法!


我最終通過 get() 函數上的IntelliSense找到它。 所以,我會在這裡發布給任何正在尋找類似信息的人。

無論如何,語法幾乎相同,但略有不同。 不需要使用 HttpParams() ,而是需要將參數初始化為 HttpParams() 並且 get() 函數中的屬性現在稱為 params 而不是 search

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

我實際上更喜歡這種語法,因為它更多參數不可知。 我還重構了代碼,使其略微縮寫。

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或vanilla 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 })

更簡潔的解決方案:

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






lodash