ui-router $ stateParams与$ state.params

使用ui-router，可以将$state或$stateParams注入控制器中，以访问URL中的参数。但是，$stateParams仅通过访问参数会公开属于访问它的控制器管理的状态的参数及其父状态，而$state.params具有所有参数，包括处于任何子状态的参数。

给定以下代码，如果我们直接加载URL http://path/1/paramA/paramB，则这是控制器加载时的样子：

$stateProvider.state('a', {
     url: 'path/:id/:anotherParam/',
     controller: 'ACtrl',
  });

$stateProvider.state('a.b', {
     url: '/:yetAnotherParam',
     controller: 'ABCtrl',
  });

module.controller('ACtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id and anotherParam
}

module.controller('ABCtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id, anotherParam, and yetAnotherParam
}

问题是，为什么会有区别？是否有关于何时何地应使用或避免使用它们的最佳实践指南？

该文档在这里重申了您的发现：https : //github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

如果我的记忆能发挥作用，$stateParams它的引入要晚于原始记忆$state.params，并且似乎是避免连续写入的简单辅助注入器$state.params。

我怀疑是否有最佳实践准则，但是上下文对我而言是成功的。如果您只想访问URL中收到的参数，请使用$stateParams。如果您想了解有关状态本身的更复杂信息，请使用$state。

使用的另一个原因$state.params是基于非URL的状态，（在我看来）状态文档不足，而且功能非常强大。

我只是在谷歌搜索如何传递状态而不必在URL中公开状态时发现了这一点，并在SO的其他地方回答了一个问题。

基本上，它允许这种语法：

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

编辑：这个答案是正确的版本0.2.10。正如@Alexander Vasilyev指出的那样，它在version中不起作用0.2.14。

使用的另一个原因$state.params是当您需要像这样提取查询参数时：

$stateProvider.state('a', {
  url: 'path/:id/:anotherParam/?yetAnotherParam',
  controller: 'ACtrl',
});

module.controller('ACtrl', function($stateParams, $state) {
  $state.params; // has id, anotherParam, and yetAnotherParam
  $stateParams;  // has id and anotherParam
}

两者之间有许多差异。但是在实际工作时，我发现使用 $state.params效果更好。当您使用越来越多的参数时，在中进行维护可能会造成混淆$stateParams。如果我们使用多个不是URL参数的参数$state非常有用

 .state('shopping-request', {
      url: '/shopping-request/{cartId}',
      data: {requireLogin: true},
      params : {role: null},
      views: {
        '': {templateUrl: 'views/templates/main.tpl.html', controller: "ShoppingRequestCtrl"},
        'body@shopping-request': {templateUrl: 'views/shops/shopping-request.html'},
        'footer@shopping-request': {templateUrl: 'views/templates/footer.tpl.html'},
        'header@shopping-request': {templateUrl: 'views/templates/header.tpl.html'}
      }
    })

我有一个解决某事的根状态。传递$state为resolve参数不能保证的可用性$state.params。但是使用$stateParams意志。

var rootState = {
    name: 'root',
    url: '/:stubCompanyId',
    abstract: true,
    ...
};

// case 1:
rootState.resolve = {
    authInit: ['AuthenticationService', '$state', function (AuthenticationService, $state) {
        console.log('rootState.resolve', $state.params);
        return AuthenticationService.init($state.params);
    }]
};
// output:
// rootState.resolve Object {}

// case 2:
rootState.resolve = {
    authInit: ['AuthenticationService', '$stateParams', function (AuthenticationService, $stateParams) {
        console.log('rootState.resolve', $stateParams);
        return AuthenticationService.init($stateParams);
    }]
};
// output:
// rootState.resolve Object {stubCompanyId:...}

使用“ angular”：“〜1.4.0”，“ angular-ui-router”：“〜0.2.15”

我在将先前的状态参数从一条路线传递到另一条路线时所做的有趣观察是，$ stateParams会被吊起并覆盖与当前状态参数一起传递的先前路线的状态参数，但使用$state.params不会。

使用时$stateParams：

var stateParams        = {};
stateParams.nextParams = $stateParams; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{next:'app.details'}}

使用$ state.params时：

var stateParams        = {};
stateParams.nextParams = $state.params; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{item_id:123}}

这里本文中清楚地说明：该$state服务提供了许多用于在当前状态操纵状态以及相关数据有用的方法。当前状态参数可通过$stateparams键在服务上访问。该$stateParams服务返回这个完全相同的对象。因此，该$stateParams服务严格来说是一种便利服务，可以快速访问该服务上的params对象$state。

因此，任何控制器都不应同时注入$state服务及其便利服务$stateParams。如果$state仅为了访问当前参数而注入，则应重写控制器以注入$stateParams。