Angular.js(angular-ui) 父组件resolve参数在子组件无返回值问题

1. 检查子组件绑定配置 #

$uibModal 给组件传递 resolve 数据时，要求子组件显式声明对应输入绑定，90%的同类问题都是遗漏该配置导致的。请确认你的组件定义里有以下配置：

angular.module('你的模块名').component('partnerList', {
  bindings: {
    // 必须声明接收resolve输入
    resolve: '<',
    close: '&',
    dismiss: '&'
  },
  controller: partnerListCtrl,
  template: '你的组件模板内容'
})

2. 调整子组件取值时机 #

你当前在控制器初始化阶段直接取值，部分场景下resolve的赋值会晚于控制器初始化，建议使用$onInit生命周期钩子取值保证稳定性：

function partnerListCtrl($scope, uiGridConstants) {
    const $ctrl = this;
    // 所有输入绑定完成后才触发，此时取值不会出现时序问题
    $ctrl.$onInit = function() {
      $ctrl.items = $ctrl.resolve.items;
      $ctrl.gridOptions = {
        // 其他配置省略
        data: $ctrl.items
      };
    }
   // 其他业务逻辑
}

3. 确认resolve返回值正常 #

可以在父组件的resolve配置里加日志，确认返回值不存在异常：

resolve: {
  items() {
    // 打印确认返回值是否正常
    console.log('resolve返回结果：', res.data.d.results)
    return res.data.d.results;
  },
}

4. 兜底兼容方案 #

如果上述操作完成后仍有问题，可以在子组件加监听逻辑兼容时序异常：

$scope.$watch(() => $ctrl.resolve?.items, (newVal) => {
  if (newVal) {
    $ctrl.items = newVal
    $ctrl.gridOptions.data = newVal
  }
}, true)

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