Angular 4 动态填充查询参数

Question

目标是生成如下 url：

/powerPlants?onlyActive=true&page=1

我的 Typescript 中有以下函数！

allPowerPlants(config: PowerPlantListConfig): Observable<PowerPlant[]> {
    // Convert any filters over to Angular's URLSearchParams
    const params: URLSearchParams = new URLSearchParams();

    Object.keys(config.filters)
      .forEach((key) => {
        params.set(key, config.filters[key]);
      });

    return this.apiService
      .get('/powerPlants'),
      .map(data => data);
  }

关于如何从传入配置 PowerPlantListConfig

生成此动态 url 的任何建议

PowerPlantListConfig 如下：

export class PowerPlantListConfig {
  type = 'all';

  filters: {
    page?: number,
    onlyActive?: boolean
  } = {};
}

编辑：作为一个快速而肮脏的尝试，这就是我尝试的（通过硬编码值）

import {Http, Response} from '@angular/http';
makeRequest(): void {

    const params: URLSearchParams = new URLSearchParams();

    params.set('onlyActive', 'false');
    params.set('page', '1');
    this.loading = true;
     this.http.request('http://localhost:9000/powerPlants', {params: params})
    // this.http.request('http://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res: Response) => {
      console.log(JSON.stringify(res.json()));
      this.data = JSON.stringify(res.json());
      this.loading = false;
    });
  }

但这似乎没有生效，因为我看到 URL 没有调用 URL 参数！

Answer 1

根据Maxim Koretskyi

的建议和提示

我必须将 URLSearchParams 导入为：

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

但如果我的 Webstorm IDE 能帮我做到这一点，我会很高兴！

Answer 2

新 HttpClientModule 的一个小例子

import {HttpParams} from "@angular/common/http";

const params = new HttpParams()
    .set('orderBy', '"$key"')
    .set('limitToFirst', "1");

this.courses$ = this.http
    .get("/courses.json", {params})
    .do(console.log)
    .map(data => _.values(data))

您也可以使用 New HttpClientModule 并使用 HttpParams 来获得相同的 . same

的要点

Angular 4 动态填充查询参数

Angular 4 Populate Query Parameters Dynamically

angular

rest

http

url-parameters