Angular 5 HttpClient 路径变量

Question

我正在为REST API开发一个Angular客户端。

我的API暴露了像这样的URL：

https://server.com/users/detail/3

3是一个参数。

我尝试使用Angular客户端生成路径变量，但一直未能成功。我已经尝试了：

getUser(username: string) {
const options = {
  params: new HttpParams().set('username', username)
};

return this.http.get<User>('detail/{username}', options); }

但结果并不正确。有人可以帮我吗？

编辑

尝试了解决方案后，仍然不起作用。如果...

 getUser(username: string) {
const options = {
  params: new HttpParams().set('username', username)
};

const resource = 'detail/' + username;
return this.http.get<any>(resource);  }

这个解决方案对我来说似乎太差了，Angular HttpClient 有没有更好的解决方案呢？

- Jose A. Matarán

---

如果您没有完全指定url，httpClient如何知道目标url？ - smnbbrv

因为我正在使用拦截器来外部化这个。 - Jose A. Matarán

Answer 1

因为使用 http.get 方法，你的参数应该插入在 URL 中：

getUser(username: string): void {
   let url = `https://server.com/users/detail/${username}`;
   this.http.get< User >(url)  
     //if api returns any data
     .subscribe((returnObject: User) => {
       //returned data
       //remember that this segment will be returned asynchronously
       //for example: callback(returnObject);
     }, (error: HttpErrorResponse) => {
       //if error
       //for example: errorCallback(error)
     })
}

如果您想设置 HttpParams，您应该使用 this.http.post - 当然，如果服务器支持 post 而不是 get。

- ambussh

---

我真的希望有更好的内置Angular或TypeScript方法来提供URL路径参数。这种特定方式的问题在于它只是直接字符串连接，没有特殊字符替换。如果您的用户名恰好是my/name?is=slim&shady，则实际上无法正确调用端点（对于大多数后端框架）。您将要么使用名称为my的/users/detail/端点丢弃以下URL内容，要么使用/users/detail/my/name端点导致404（或不同）错误。 - Snackoverflow

完全同意@Snackoverflow的观点。此外，对于所有使用此方法的人， 出于安全考虑，您应该使用encodeURIComponent()来包装路径变量的值。 - snap

Answer 2

你的第二次尝试已经接近成功，但你需要使用美元符号和反引号代替单引号才能使字符串插值起作用：

return this.http.get<User>(`detail/${username}`, options); }

- GreyBeardedGeek

---

我自己的尝试中也没有看到这个工作。在AngularJS中，这很简单，但在Angular中似乎没有关于httpClient的文档。你的语法对我不起作用。 - Alex White

是的，你说得对 - 这是一个笔误，我刚刚修正了它。字符串插值需要使用反引号，并且参数必须用花括号和一个前导美元符号括起来。请查看更新后的答案。 - GreyBeardedGeek

只是要澄清一下，username将会在请求的HttpParams中提供吗？ - Alex White

不，在这种情况下，它是路径的一部分。 - GreyBeardedGeek

现在我有点困惑 - options 到底是什么？我想要动态提供一个路径段以便稍后填充。在 AngularJS 中，你可以定义 'myapy/resources/:id'，然后当使用参数调用时，'id' 参数会被放置在路径中... - Alex White