使用 Angular UI Router 在 URL 中设置动态参数

Question

我正在使用查询系统，它允许用户从动态字段列表构造查询，并且我想在 URL 中保留查询。

通常我会这样做：

$stateProvider.state('alerts', {
                url: '/alerts/list?p1&p2&p3'
            })

在控制器中，我可以使用 $stateParam 读取参数：

console.log($stateParams.p1)

我可以通过以下方式将查询保存在 URL 中：

$state.go($state.current, {p1:'1', p2: '2'}, {location: true, inherit:true, notify:false})

但问题是我不能声明所有参数。

我想做：

$state.go($state.current, {p1:'1', p2: '2', p3:'3', p4: '4', p5:'5'}, {location: true, inherit:true, notify:false})

但 ui-router 会忽略未声明状态的参数。

我知道 $location.search 可以让我访问 URL 搜索部分，但我如何设置 URL（不更改状态和重新加载页面）？

Answer 1

这对我有用：

$stateProvider.state("alerts", { url: "/alerts/list?{query:json}" });

和

$state.go($state.current, {query: {a:1, b:2, c: '3'}}, {location: true, inherit:true, notify:false})

Answer 2

在one of angular-ui's Github issue pages 上进行了很长时间的讨论，可以追溯到 2013 年。到目前为止，没有一个答案让每个人都满意，我是不满意的人之一。

到目前为止，最好的解决方法是仅使用查询参数（而不是 url 路径参数）并将 reloadOnSearch: true 选项添加到您计划使用动态查询参数的状态（在不重新加载页面的情况下更改它们）。这在a different StackOverflow answer here 中进行了讨论。

截至我写这篇文章的那一天，有一个 angular-ui 的分支，其中有一个叫做“动态参数”的东西，现在在 master 后面 300 次提交，但可能已经解决了问题（但现在它已经远远落后于 master 了我不想使用它）。还有一个即将发布的 1.0 版本的 ui-router，但我不知道什么时候发布。

Answer 3

确保您使用的是最新的 1.x ui-router - 这很重要。然后在您的路线中，在参数设置中使用 dynamic: true 。这将阻止刷新。像往常一样使用 ui-sref - 根本不要使用任何通知/重新加载/定位的东西，因为它会破坏事情 - 动态负责在后台正确设置这些内容。使用 value 您可以设置一个默认值，如果 URL 为空（设置为 '' - 不为空），则 squash 会删除 URL 中的尾部斜杠。

.state('myappstate.somestate', {
        url: '/:a/:b/:c/:d',
        params: {
            a: {dynamic: true, value: 'someDefault'},
            b: {dynamic: true, value: 'anotherDefault'},
            c: {dynamic: true, value: '', squash: true},
            d: {dynamic: true, value: '', squash: true}
        }
    })