从表单控件写入浏览器 URL [重复]

Posted 2023-02-22

技术标签:

【中文标题】从表单控件写入浏览器 URL [重复]【英文标题】：Write to the browser URL from a form control [duplicate] 【发布时间】：2019-02-28 03:52:18 【问题描述】：

我有一个角表，在标题上方有许多搜索框。当用户在搜索框中键入时，相关列被过滤。

我想将搜索框中的值直接写入 URL，以便用户键入和更改搜索条件时，URL 中的参数会自动更新。如果用户收藏或共享 URL，或者在历史记录中从该 URL 导航到该 URL，则使用先前的搜索参数。

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

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

如果我正在导航，我认为使用 RouteReuseStrategy 会节省一些渲染时间，但我不确定这是否足够。

【问题讨论】：

【参考方案1】：

您正在寻找Location#replaceState（强调我的）：

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

只要有变化就调用这个函数：

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

【讨论】：

以上是关于从表单控件写入浏览器 URL [重复]的主要内容，如果未能解决你的问题，请参考以下文章