Question

我正在使用Angular UI路由器，这在大多数情况下效果很好。但是，我有一种情况，我不知道提前查询字符串参数的名称。

通常使用UI路由器，您可以定义类似这样的路由：

$stateProvider.state('test', {
	url: '/test?testQueryStringParam',
	templateUrl: 'Test.html',
	controller: 'TestController'
});

然后在我的控制器中，我可以使用$ stateParams访问testQueryStringParam。

但是，使用UI路由器时，您无法访问路由定义中未指定的任何查询字符串参数。

Angular框架附带的路由器确实允许您这样做。所以我尝试使用我的UI路由器定义的$ location服务。这确实有点工作。

当我想添加查询字符串参数时，我使用：

$location.search("paramName", "paramValue");

当我想获取查询字符串值时，我只使用：

$location.search()

这会更新URL，但不会重新实例化控制器（如$ state.go（$ state.current，{}，{reload：true}））。这似乎不是一个大问题，因为我可以自己重新加载数据。但是，如果您在浏览器中使用后退按钮，它会再次更改URL，但不会重新实例化控制器。

无论如何

我可以仅使用UI路由器来实现这一点吗？
获取使用$ location实际重新实例化控制器的解决方法。

作为最后的手段，我也尝试指导更新window.location，但这会刷新整个页面，这是不可接受的。

由于

Answer 1

您可以传递未在网址

中显示的非网址参数

$stateProvider.state('test', {
    url: '/test?testQueryStringParam',
    params: {
    optParam: null,
    },
    templateUrl: 'Test.html',
    controller: 'TestController'
});

如您所见，optParam是一个可选参数，默认值为null，在URL中不可见

您可以使用$stateParams

在控制器中访问此参数

$stateParams.optParam

这是一个有用的blog

Angular UI Router - 允许任何查询字符串参数

1 个答案: