Angular 4 动态填充查询参数

Question

目标是生成如下网址：

/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

只是一个新的 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的要点

Answer 2

来自Maxim Koretskyi的建议和提示

我必须将 URLSearchParams 导入为：

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

但如果我的 Webstorm IDE 为我做这件事，我会很高兴的！