AngularJS UI-Router：带参数获取状态的绝对 URL

Posted 2023-02-19

【中文标题】AngularJS UI-Router：带参数获取状态的绝对 URL

【英文标题】：AngularJS UI-Router : Get the absolute URL of the state with the parameters

【发布时间】：2014-08-21 12:42:19

【问题描述】：

我希望能够在不更改状态的情况下更改地址的 URL，以防止重新呈现。根据我的搜索，ui-router 目前不提供此功能，但来自 anuglar 的$location.path 提供。

所以，很自然地，我想使用$state.get(stateName) 来访问该州的 URL，这样我就不用手动输入 URL。

我有两个问题：

$state.get(stateName) 仅返回相对路径。如何获取绝对路径？ 它还返回状态的定义，参数未定义。如何获取带参数的 URL？

例如，如果我有一个名为user.home.view 和user.home 的状态，我将我的状态定义为

'user': 
     abstract: true,
     url: '^/users/'
,
'user.home': 
     url: ''
,
'user.home.view': 
     url: ':id/'

所以现在，$state.get(user.home.view).url 返回:id/。如何获取完整的 URL（即/users/5/）？

【参考方案1】：

你应该使用$state.href()。

要获取绝对 URL，您可以使用：

$state.href('user.home.view', , absolute: true);

要获取带有参数的 URL，您需要将它们添加为第二个参数

【讨论】：

你能扭转这个吗？从 href 中获取状态？

我建议看看 ui.router.util angular-ui.github.io/ui-router/site/#/api/…

【参考方案2】：

怎么样：

$state.href($state.current.name, $state.params, absolute: true)

【讨论】：

最实用最完整的答案！

【参考方案3】：

为了获取不带参数的绝对网址，我发现我需要传递inherit: false，例如：

$state.href('home', , absolute: true, inherit: false)

没有inherit: false，我得到了任何/所有可能存在的参数。