Angular1.6.9+UI-Router1.0.15：Resolver无法获取$stateParams值求助

我之前在使用UI-Router 1.x搭配Angular 1.6.x时，也碰到过resolver拿不到$stateParams、无法绑定到组件的坑。结合你提到的示例，我整理了核心问题点和可落地的解决方案：

一、先明确UI-Router 1.x的Resolver规则 #

UI-Router 1.x对组件的resolve机制做了简化：resolve的结果会直接映射到组件的bindings属性，但前提是你要遵守两个关键规则：

1. 正确在Resolver中注入$stateParams #

很多人会忽略这一点——resolve函数必须显式注入$stateParams，Angular 1.6的严格DI模式下，隐式调用会直接失败。示例代码如下：

// 正确的state定义
$stateProvider.state('yourState', {
  url: '/items/:itemId', // 确保url里有对应的参数占位符
  component: 'yourComponent',
  resolve: {
    // 显式注入$stateParams和你的服务
    itemData: function(YourDataService, $stateParams) {
      // 这里可以正常拿到$stateParams.itemId
      console.log('当前参数:', $stateParams.itemId);
      return YourDataService.fetchItem($stateParams.itemId);
    }
  }
});

2. 组件Bindings必须与Resolve的Key完全匹配 #

UI-Router会把resolve的key作为组件的输入属性名，所以组件的bindings必须声明完全相同的名称，并且建议用单向绑定<（因为resolve的数据是只读的）：

// 正确的组件定义
angular.module('yourApp').component('yourComponent', {
  templateUrl: 'your-component.html',
  bindings: {
    itemData: '<' // 必须和resolve里的key一致
  },
  controller: function() {
    var ctrl = this;
    // 组件初始化时，ctrl.itemData就会被resolve的结果赋值
    this.$onInit = function() {
      console.log('Resolver返回的数据:', ctrl.itemData);
    };
  }
});

二、排查常见错误点 #

如果还是不行，检查以下几个容易踩的坑：

• 忘记开启UI-Router的组件支持：UI-Router 1.x需要确保你引入了@uirouter/angularjs包，并且模块依赖里加了ui.router。
• Resolve函数没有返回值：resolve必须返回一个Promise或者具体值，否则组件拿不到数据。
• Bindings用了双向绑定=：虽然双向绑定也能工作，但对于resolve的只读数据，单向绑定<更符合设计，也避免不必要的性能损耗。
• 参数传递错误：跳转state时，确保你正确传递了参数，比如$state.go('yourState', {itemId: 123})，而不是漏传或者参数名不匹配。

三、调试技巧 #

• 在resolve函数里添加console.log($stateParams)，确认参数是否正确获取。
• 使用Angular调试工具（如ng-inspector）查看组件的bindings属性，是否有resolve返回的数据。
• 检查浏览器控制台是否有DI相关的报错，比如Unknown provider: $stateParamsProvider，这说明你没正确注入$stateParams。

内容的提问来源于stack exchange，提问作者DavidNJ