angular-ui-router - 在 ui-sref 链接上保存状态参数

Question

情况

有 2 个子状态使用相同的参数：

$stateProvider
    .state('rootState', {
        url: '/{ID}',
        templateUrl: 'template1.html',
        controller: 'controller1',
        reloadOnSearch: false
    })
    .state('rootState.subStateA', {
        url: '/subStateA',
        parent: 'rootState',
        templateUrl: 'template2.html',
        controller: 'controller2',
        reloadOnSearch: false
    })
    .state('rootState.subStateB', {
        url: '/subStateB/',
        parent: 'rootState',
        templateUrl: 'template3.html',
        controller: 'controller3',
        reloadOnSearch: false
    })

现在，有2个链接：

<a href ui-sref="rootState.subStateA">State A</a>
<a href ui-sref="rootState.subStateB">State B</a>

问题

当我从状态 A 移动到状态 B 时，参数 ID 变为空。

问题

从一种状态移动到另一种状态时，如何保留 ID 参数？

Answer 1

一种方法是将 $stateParams 注入 $rootScope 并将它们放在任何地方：

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

稍后您可以使用以下链接：

<a href ui-sref="rootState.subStateA({ID:$stateParams.ID})">State A</a>
<a href ui-sref="rootState.subStateB({ID:$stateParams.ID})">State B</a>

或者甚至可能

<a href ui-sref="rootState.subStateA($stateParams})">State A</a>
<a href ui-sref="rootState.subStateB($stateParams})">State B</a>