Angular 4 动态填充查询参数

Posted 2023-02-22

【中文标题】Angular 4 动态填充查询参数

【英文标题】：Angular 4 Populate Query Parameters Dynamically

【发布时间】：2018-02-01 11:47:38

【问题描述】：

目标是生成如下网址：

/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！

【问题讨论】：

请使用angular 用于版本2+，angularjs 用于版本1.x（我已经重新标记了这个问题）。谢谢:)

感谢您的建议！

你能帮我解决我的问题吗？

不，抱歉。我不熟悉 angular 4

我主要是后端开发人员，对我来说，这就像说我不知道​​ Scala 2.12，因为我只知道 Scala 2.11！没有冒犯的意思，但这就是它使用 Angular 编程的目的。它的变化如此之大，以至于您必须从每个新版本开始学习它！

【参考方案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的要点

【参考方案2】：

来自Maxim Koretskyi的建议和提示

我必须将 URLSearchParams 导入为：

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

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

【讨论】：

试试 VS 代码！它将为您添加您缺少的参考资料。 :-)

那来自微软？我对微软的任何东西都过敏！

那么我希望你没有使用 Observables ......因为它们也来自微软。 :-) hanselman.com/blog/ReactiveExtensionsRxIsNowOpenSource.aspx 和 TypeScript 一样！

我主要是后端m子，我做了很多Scala和Haskell。我喜欢用 ScalaJS 做 javascript，是的，我在 Scala 上使用过 Rx，但我使用 Monix 库——它实际上是受 Rx.NET 启发的

@sparkr，它不添加导入引用，因为它认为its NodeJS class。在使用 Http 类时，您必须始终仔细检查导入的内容，因为其中许多类似于 NodeJS 类，您最终可能会出现意外行为