angular - 在 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