从表单控件写入浏览器URL

Question

我有一个角度表，表头上方有多个搜索框。当用户在搜索框中键入内容时，相关列将被过滤。

我想将搜索框中的值直接写到URL，以便当用户键入和更改搜索条件时，URL中的参数会自动更新。如果用户在URL上添加书签或共享URL，或者在历史中来回导航，则使用以前的搜索参数。

我看过router docs，但是看到写入URL的唯一方法是导航到URL。我不希望路由，防护和导航事件只是在搜索表单和URL参数之间触发更直接的绑定。

我正在使用Angular 6.1.3。我可以在角度范围内执行此操作，还是需要走到幕后并尝试绕过它？

我认为使用RouteReuseStrategy可以节省一些导航时间，但是我不确定是否足够。

Answer 1

您正在寻找Location#replaceState（重点是我）：

  

将浏览器URL更改为给定URL的规范化版本，并替换平台历史记录堆栈中的顶部项。

只要有更改，就调用此函数：

ngOnInit () {
  this.form.get('field').changes.subscribe(value => {
    this.location.replaceState('search/' + value)
  })
}