angular-ui-router – Angular UI Router – 允许任何查询字符串

发布时间：2020-12-17 08:47:26 所属栏目：安全来源：网络整理

导读：我使用的是Angular UI路由器,这在大多数情况下效果很好.但是,我有一种情况,我不知道提前查询字符串参数的名称. 通常使用UI路由器,您可以定义类似这样的路由： $stateProvider.state('test',{url: '/test?testQueryStringParam',templateUrl: 'Test.html',con

我使用的是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,但这会刷新整个页面,这是不可接受的.

谢谢

您可以传递未在URL中显示的非url参数

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

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

您可以使用$stateParams在控制器中访问此参数

$stateParams.optParam

这是一个有用的blog

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!