AngularJS UI 路由器 URL 参数在更改状态时消失

Question

我正在尝试使用 UI 路由器通过单击按钮来更改我的 AngularJS 应用程序的状态。当我按下按钮时，所需的信息正在正确发送，但是，当状态发生变化时，URL 参数消失了。例如，如果我的路线定义为 /parent/state/child/:param 并且我转到 /parent/state/child/3，当转换完成时，“3”消失，我留在 /parent/state/child/.

我试过使用

进行转换

$state.go('parentState.childState', {param: 3});

以及

$location.path('/parent/state/child/3);

甚至

$window.location.href = '/parent/state/child/3;

所有人都得到了相同的结果。

这是我的状态文件：

(function() {
    'use strict'
    angular.module('app')
        .config(states);
    states.$inject = ['$stateProvider', '$locationProvider'];
    function states($stateProvider, $locationProvider) {
        $locationProvider.html5Mode(true);

        $stateProvider.state({
            name: 'parentState',
            url: '/parent/state',
            abstract: true,
            template: '<ui-view/>'
        })
        .state({
            name: 'parentState.childState',
            url: '/child/:param',
            templateUrl: 'some/route',
            controller: function ($stateParams) {
                console.log($stateParams);
            }
        });
    }
})();

正在正确加载子状态的模板 URL。我还可以看到 $state.go('parentState.childState, {param: value}); 中设置的值是正确的，但是，当我将 $stateParams 输出到控制台时，我得到 {param: ""}。即使我尝试直接转到 link（即在我的浏览器中键入 /parent/state/child/5），最终参数也会消失。

关于我可能做错了什么有什么想法吗？谢谢

Answer 1

一种解决方案是在状态中显式设置参数：

.state({
  name: 'parentState.childState',
  url: '/child',
  params: {
    mySpecialParam: null
  },
  templateUrl: 'some/route',
  controller: function ($stateParams) {
    console.log($stateParams);
  }
})

$stateParams 现在应该显示 { mySpecialParam: null }

当你从一个状态转到另一个状态时：

$state.go('parentState.childState', { mySpecialParam: 3 })

或

<a ui-sref="parentState.childState({ mySpecialParam: 3 })">View childState</a>

此外，我建议让您的参数名称不像 'param/params'，并且对值进行一些语义处理，这样就很明显了。

有关 stateProvider 这个特定部分的更多信息，请参阅 ui-router 的 URL Routing 页面。

Answer 2

我发现了问题。

由于我的应用程序的设置方式，我无法将 resolve 与 UI 路由器一起使用。相反，我设置了一个函数来防止默认状态更改，运行需要解决的事情，如果它们成功完成，则继续原来的转换。在那一节中，当我应该使用 $state.go(toState.name, toParams); 时，我使用了 $state.go(toState.name);。由于未传递参数，因此它们在 URL.

中丢失

AngularJS UI 路由器 URL 参数在更改状态时消失

AngularJS UI Router URL parameter vanishes when changing states

angularjs

nested

angular-ui-router