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

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