首页 > 解决方案 > 如何在 Angular 6 中将查询字符串传递给我的服务

问题描述

我有一个调用这样的服务的组件:

this.resultService.getResults().subscribe(
      results => {
        this.results = results;
        this.searchResults = results.SearchResults; 
        this.searchResults = this.processResults(this.searchResults);                      
      },
      error => this.errorMessage = <any>error
    );

该服务使用 HttpClient 从网站获取数据。现在,我在服务中使用静态 URL 仅用于测试。但是,既然我知道该服务有效并且正在返回结果,我想传入要在 URL 中使用的查询字符串,而不是对其进行硬编码。这可能吗?我的服务包含以下代码:

private resultsUrl = 'https://testingsite.com/api/orgs/search?primaryCategory=plumber&city=denver&stateProvince=CO&PageNumber=1';  

  constructor(private http: HttpClient) { }

  getResults(): Observable<any> {
    return this.http.get<any>(this.resultsUrl, httpOptions).pipe(
      tap(data => console.log('Response Data: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

  private handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = 'An error occurred: ${err.status}, error message is: ${err.message}';
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }

标签: angulartypescript

解决方案


您可以使用 `` 并将变量放入 $ 中,例如:

getResults(variable:string): Observable<any> {
    let url = `this.baseUrl/admin/user/${variable}` 
    return this.http.get<any>(url, httpOptions).pipe(
      tap(data => console.log('Response Data: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

推荐阅读