在Angular中使用ui.router进行参数传递的多种方式
在实际工作中,我需要实现点击一个物体并重定向到物体的具体详情的页面的需求,为了实现这个功能,需要用到ui.router进行参数传递。在实现后,我将路由的参数传递实现的多种方式进行整理。
查询参数(Query Parameters)
查询参数将会被映射到UI Router的$stateParams中,可以在$stateProvider的state的属性的url模板中进行配置。
$stateProvider.state('a', {
url: '/a?paramA',
templateUrl: 'new.html',
controller: function ($scope, $stateParams) {
$scope.paramA = $stateParams.paramA;
}
})
你可以在ui-sref中创建一个链接指向这个状态
<a ui-sref="a({paramA: 1})">new Query String</a>
此时导航栏中的url看起来是这样的/a?paramA=1
当然,如果你想要传递多个参数,你可以使用&
$stateProvider.state('b', {
url: '/b?paramA¶mB',
templateUrl: 'new.html',
controller: function ($scope, $stateParams) {
$scope.paramA = $stateParams.paramA;
$scope.paramB = $stateParams.paramB;
}
})
你可以在ui-sref中创建一个链接指向这个状态。
<a ui-sref="b({paramA: 1, paramB: 2})">multiple Query String</a>
此时导航栏中的url看起来是这样的/a?paramA=1¶mB=2
可选的路由参数(optional Route Parameters)
在UI Router中,路由参数默认是可选的。这就意味着下面的/a/1和/a/都是可行的,但是/a是不行的。导航栏中的?后坠往往告诉你在一个url中查询部分的是从这里开始的,比如/a/:id?
$stateProvider.state('a', {
url: '/a/:id',
templateUrl: 'new.html',
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
}
})
使用<a ui-sref="a({id: 1})>optional route param</a>来产生/a/1;
当然,如果想要传递多个参数的话,可以这样使用url: '/a/:id/:paramA',<a ui-sref="a({id: 1, paramA: 2})>multiple optional route param</a>产生的路径是/a/1/2。
不使用带参数的URL(Non-URL route parameters)
如果你不喜欢在URL中使用/,你可以使用下面这种状态。
$stateProvider.state('a', {
url: '/a',
params: {
id: null
},
templateUrl: 'new.html',
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
}
})
你同样可以使用params对象为路由参数设置一个默认值。
使用<a ui-sref="a({id: 1})>non-url route params</a>产生的路径为/a,但是你仍然可以在$stateParams获取到参数。
💎

本文介绍了在Angular中使用ui.router进行参数传递的三种方法:查询参数、可选的路由参数和非URL路由参数。通过实例展示了如何创建链接、配置状态,并解释了参数在导航栏中的表现形式。

被折叠的 条评论
为什么被折叠?



