angular - 如何以类似于 Angular 中的 HttpHeaders 的紧凑方式设置 HttpParams

<分区>

我是 Angular 的新手，现在正在从“旧的”Http API 升级到新的 HttpClient API。

因此，我必须使用新的 HttpHeaders 和 HttpParams，它们目前运行良好。但是我能找到的声明示例对我来说有点奇怪，因为它基本上可以归结为这一点。

let searchParams = new HttpParams();
searchParams = searchParams.append('query', query);
searchParams = searchParams.append('sort', sort);
searchParams = searchParams.append('order', order);

const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + user['sessionToken']
});

有没有办法像HttpHeaders一样声明HttpParams？我使用的方法是我在网上找到的唯一方法，经过大量尝试和错误后似乎是唯一可行的方法。

我不是在问如何设置 HttpParams，我想知道为什么 HttpParams 和 HttpHeaders 不能以相同的方式设置(在我的示例中设置 HttpHeaders 的方式，在一行中声明)。

最佳答案

在 Angular@5 中，您可以使用与 header 相同的方式设置参数，如下所示:

let searchParams = new HttpParams({
    fromObject: {
        query: query,
        sort: sort,
        order: order
    }
});

const modified = req.clone({params: searchParams});

或者你可以直接在一个请求上使用setParams方法:

const modified = req.clone({setParams: {'query': query, 'sort': sort, 'order': order}});

如果您对为什么 HttpParams 和 HttpHeaders 不可变感到好奇，请查看此答案 Why do most classes of the HttpClient API define immutable objects?

关于angular - 如何以类似于 Angular 中的 HttpHeaders 的紧凑方式设置 HttpParams，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47928164/

上一篇：R高宪章: Polar graph having conditional colors

下一篇：c# - WPF 数据绑定(bind)进度条

html - 如何根据 Angular 7 中的复选框选择向表中添加新列

angular - 错误 : XHR error (404 Not Found) loading angular2/http

excel - 如何使用 Angular2 正确下载 excel 文件

angular - 这是将 Disqus 嵌入 Angular2 组件的正确方法吗？

javascript - 带有百分比指示器的 Angular 2+ 应用程序预加载器

php - 在 PHP 中删除 Angular2 应用程序中的数据

angular - 只有在父组件中的函数完成后才调用子组件中的函数

angular - 如何在模型中定义嵌套对象？ (angular2/ typescript )

angular - cdkPortal 与 ngTemplateOutlet 有何不同