Angular 4、如何将一个FormGroup转换成一个带查询参数的URL？

Question

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

当用户点击 "Search" 我想路由到一个 SearchResultsComponent 来显示结果。我还希望浏览器中的路由包含表示表单输入的查询参数，以便用户可以将其复制到某处并轻松地重新使用。本质上，正如我想象的那样，访问 https://carsuniverse.com/?make=Honda&model=Civic&year=2009 应该激活 SearchResultsComponent ，后者又会调用执行搜索的服务，returns 将其发送到组件并将其显示在页面上

在 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

Angular 4、如何将一个FormGroup转换成一个带查询参数的URL？

In Angular 4, how do you convert a FormGroup into a URL with query parameters?

query-parameters

typescript

angular-routing

angular