[解決済み] `ui-router` $stateParams vs. $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に受け取ったparamsにアクセスしたいだけなら $stateParams . 状態そのものについて、もっと複雑なことを知りたい場合は $state .