angularjs - `ui-router` $stateParams 与 $state.params

Question

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

给定以下代码，如果我们直接加载 URL http://path/1/paramA/paramB，这就是 Controller 加载时的情况:

$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
}

问题是，为什么会出现这种差异？是否有关于何时以及为何应该使用或避免使用其中任何一个的最佳实践指南？

Answer 1

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

如果我没记错的话，$stateParams 的引入晚于原始的 $state.params，并且似乎是一个简单的辅助注入(inject)器，以避免连续写入 $state.params.

我怀疑是否有任何最佳实践指南，但我认为上下文胜出。如果您只想访问 url 中接收到的参数，请使用 $stateParams。如果您想了解有关状态本身的更复杂的信息，请使用 $state。