Angular组件间无法绑定数据？求排查组件传参问题

我帮你分析下组件间passingObject绑定失败的原因，结合你贴的目标组件代码，一步步来解决：

先看你提供的目标组件控制器代码：

(function(angular) { 'use strict'; 
  function someOtherTabPageController($scope) { 
    //do some work with the passingObject 
    alert(JSON.stringify(passingObject)); 
  } 
  angular.module('heroApp').component('someOtherTabPage', { 
    templateUrl: 'someOtherTabPage.html', 
    controller: someOtherTabPageController, 
    bindings :{ 
      passingObject: '=' 
    } 
  }); 
})(window.angular);

核心问题分析 #

你在控制器里直接调用passingObject是找不到这个变量的！Angular 1.x的组件绑定属性是挂载在**控制器实例（也就是this）**上的，不是全局变量，也不会自动放到$scope里（除非你手动赋值）。另外，组件的绑定属性要等到组件初始化完成后才能访问，直接在控制器构造函数里调用大概率会拿到undefined。

修复步骤 #

1. 修正控制器内的属性访问方式
   把控制器里的passingObject改成this.passingObject，建议先把this存到变量（比如vm）里避免上下文混淆，同时用$onInit钩子来访问绑定属性——这是Angular组件初始化完成的专属钩子，能确保绑定已经生效：

   (function(angular) { 'use strict'; 
     function someOtherTabPageController() { 
       var vm = this;
       // 组件初始化完成后访问绑定对象
       vm.$onInit = function() {
         alert(JSON.stringify(vm.passingObject));
       };
     } 
     angular.module('heroApp').component('someOtherTabPage', { 
       templateUrl: 'someOtherTabPage.html', 
       controller: someOtherTabPageController, 
       bindings :{ 
         passingObject: '=' 
       } 
     }); 
   })(window.angular);
   

   如果你的模板里也要用到这个对象，组件默认的controllerAs是$ctrl，所以模板里可以写{{$ctrl.passingObject}}来访问。

2. 检查源组件的调用方式
   在heroList.js对应的模板里调用目标组件时要注意两点：

   • Angular会把组件绑定里的驼峰命名（passingObject）转换成HTML里的蛇形命名（passing-object）
   • 确保传递的变量是源组件作用域内可访问的，比如如果源组件控制器里的英雄列表是this.heroList，那么调用代码应该是：

     <some-other-tab-page passing-object="$ctrl.heroList"></some-other-tab-page>
     

额外排查点 #

• 确认heroList变量在源组件里确实有值，不是undefined
• 检查组件的模块依赖，确保heroApp模块已经正确加载了两个组件

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