带有ui-router的动态参数答案

【问题标题】：Dynamic parameters with ui-router带有ui-router的动态参数
【发布时间】：2016-07-06 23:07:40
【问题描述】：

我正在使用ui-router 和angular 开发一个搜索应用程序。

要求：

搜索表单的字段太多，都必须是可选的。
用户应与其他用户共享显示结果列表页面的 URL。（所以我需要使用查询字符串）

所以我可以有像

这样的网址

path/to/url/list?p=123&v=876

path/to/url/list?c=yes&a=true&p=123

path/to/url/list?z=yes&c=yes&a=true&p=123

path/to/url/list?z=yes&v=876&a=true&p=123

还有无穷无尽的组合。我知道我可以使用 $location.search() 来获取 json 格式的所有参数。这太棒了！但问题是如何使用ui-router 定义 url 状态？明确定义 url 中的所有参数不是一个选项。我已经阅读了很多帖子，但我没有找到具体的答案。

【问题讨论】：

定义了一个参数——查询。将所有参数放入其中。
如何在一个参数中传递所有搜索参数？在 base64 中编码参数可能是一个合理的选择？
如果你从$location获取参数，你不需要在状态中定义它们
@AlekseyL。我会试试的。

标签： angularjs angular-ui-router

【解决方案1】：

如果您从 $location 获取参数，则无需在状态中明确定义它们。

【讨论】：

【解决方案2】：

我认为，最好的方法是使用 $stateProvider 配置的 'resolve' 属性：

$stateProvider.state('mystate', {
  // Some code here
  resolve: {
     queryData: ['$location', ($location) => {
       $location.absUrl(); // Contains your full URI
       return true;
     }]
  }
});

这是一种初始化。之后，ui-router 将剪切 URI，但您将存储所需的数据。当用户直接在浏览器地址输入中传递 URI 时，这种情况也可以正常工作。

您也可以为此尝试使用 $urlMatcher 设置 $urlRouterProvider，但这会更加困难。

【讨论】：