在Angular 4中，如何将FormGroup转换为带有查询参数的URL？

Question

在我的Angular应用程序中，我有一个多字段反应性表单，用户可以使用它来搜索我们的内部数据库。

当用户单击“搜索”时，我想转到SearchResultsComponent以显示结果。我还希望浏览器中的路由包含代表表单输入的查询参数，以便用户可以将其复制到某个位置并轻松地重复使用。本质上，按照我的想象，访问https://carsuniverse.com/?make=Honda&model=Civic&year=2009应该激活，SearchResultsComponent然后依次调用执行搜索的服务，将其返回给组件并显示在页面上

在Angular中这样做的最佳方法（至少是一种好方法）是什么？

Answer 1

尝试这个：

const params = new URLSearchParams();
const formValue = this.form.value; // this.form should be a FormGroup

for (const key in formValue) {
    params.append(key, formValue[key]);
}

我们获取作为表单值的对象，并为每个键将值附加到URLSearchParams对象，然后Http在发出请求时将其传递给库。

如果表单是深层嵌套的，则可能需要考虑一下它的含义。

更新

如果要在查询参数中表示深层嵌套的表单，则必须for稍加修改循环。但是，这是一个示例，说明您的查询如何查找深层嵌套的对象：

{
    name: 'John',
    favorites: {
        food: 'Pizza',
        candy: 'Jolly Ranchers'
    }
}

上面的对象可以这样表示：

?name=John&favorites[food]=Pizza&favorites[candy]=Jolly+Ranc??hers