angular ui-router:如何在路径参数更改时重新加载状态,但在查询参数更改时不重新加载?

Mat*_*ork 13 javascript angularjs angular-ui angular-ui-router

例如,我想在导航中进行此更改以重新加载状态:

  • #/detail/1
  • #/detail/2

但我不希望这个导航重新加载状态:

  • #/detail/1?search=blah
  • #/detail/1?search=huzzah

根据ui-router文档,设置reloadOnSearch: false应该完成这个,但尝试下面的插件.何时reloadOnSearch === false,更改路径参数不会重新加载状态,即使文档说它应该.

Plunkr:http: //run.plnkr.co/ZPy9uabYlkMilwdS/#/param

Rad*_*ler 32

我创建了一个plunker,证明该ui-router功能reloadOnSearch正如此处所述:

reloadOnSearch:

布尔值(默认为true).如果false 因为搜索/查询参数已更改而不会重新触发相同的状态.当您想要修改$ location.search()而不触发重新加载时有用.

那么,这就是说,如果我们确实有这样的状态

.state('index.detail', {
      url: '/detail/:id',
      reloadOnSearch : false,
      ...
    })
Run Code Online (Sandbox Code Playgroud)

导航到

  • ui-sref="index.detail({id:1})"

将导航到加载此状态

  • ui-sref="index.detail({id:any-other-id})"

什么都不做 但!如果我们要引入像这样定义的新(例如兄弟)状态:

.state('index.other', {
      url: '/other/:id',
      reloadOnSearch : false,
      ...
    })
Run Code Online (Sandbox Code Playgroud)

导航到下面的序列将始终重新触发状态重新加载,不是因为参数更改,而是因为状态更改

  1. <a href="#/index/detail/1" ...
  2. <a href="#/index/other/1" ... // will relaod
  3. <a href="#/index/detail/2" ... // because the state
  4. <a href="#/index/other/2" ... // is changing

看到所有的行动在这里 ...

  • 从`ui-router`的角度来看,url代表唯一的状态定义.它可以是具有许多参数的一个或多个/嵌套状态.有些甚至可以采用https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters - 查询参数的格式.但最后,这个网址转换为1)状态和2)参数.而已.并且reloadOnSearch = false表示:当前状态的任何参数已更改==不重新加载.这正是文凭.说,这就是我的掠夺者1:1所显示的内容.但我只是试着解释一下,不要误会我的意思......我接受你的看法不同...... (3认同)
  • 这是对这些术语的误解.1)搜索/查询参数是映射为params的url的一部分(例如**stateName/paramValue/stateName?param1 = value1&param2 = value2**).映射为状态名称标识符的部分是其余部分.那么*reloadOnSearch = false*是什么?如果更改了URL的params部分,则不会触发状态重新加载.但如果国家本身发生变化......它将重新出现.它更清楚一点吗? (2认同)
  • 在您的OP中@MattYork您正在更改散列后的部分,并将reloadOnSearch设置为false - 这是为了忽略散列后部分的更改.这个问题很容易理解.文档可能含糊不清,但RadimKöhler只是简单地陈述了它的工作原理. (2认同)

Mat*_*ork 2

这是 UI-Router 中的一个错误,已在版本 0.2.15 中修复:

https://github.com/angular-ui/ui-router/releases

升级到最新即可解决问题