AngularJS组件：如何将祖父组件数据传递给孙组件？

这问题我在项目里碰到过好几次了，AngularJS组件默认是隔离作用域，所以孙组件的$ctrl确实只能指向直接父组件，没法直接拿到祖父的数据。给你几个实用的解决方案，按需选就行：

1. 逐层通过组件绑定传递（最直观的常规方案） #

如果你的组件层级不多，这种方式最清晰，数据流向一目了然，也符合组件的设计理念。

• 祖父组件：把person通过属性绑定传给父组件

  <!-- grandparent 模板 -->
  <parent person="$ctrl.person"></parent>
  

  祖父控制器里保留你的原数据：

  angular.module('yourApp').component('grandparent', {
    template: '<parent person="$ctrl.person"></parent>',
    controller: function() {
      this.person = { name: 'William', age: 102 };
    }
  });
  

• 父组件：接收祖父传过来的person，再绑定传给孙组件
  先在父组件的bindings里声明接收：

  angular.module('yourApp').component('parent', {
    template: '<grandson person="$ctrl.person"></grandson>',
    bindings: {
      person: '<' // 单向绑定，接收祖父的person
    }
  });
  

• 孙组件：同样通过bindings接收，就能直接用了

  angular.module('yourApp').component('grandson', {
    template: '<title>{{ $ctrl.person.name }}</title>',
    bindings: {
      person: '<'
    }
  });
  

2. 用单例服务共享数据（最适合多层级/全局共享场景） #

如果你的组件层级很深，或者多个地方都需要用到这个person数据，用服务是最灵活的选择——因为AngularJS的服务是单例的，所有注入它的组件都能拿到同一份数据，修改后也会同步到所有地方。

首先创建一个共享服务：

angular.module('yourApp').service('PersonService', function() {
  // 在这里存放共享的person数据
  this.person = { name: 'William', age: 102 };
});

然后在需要的组件里注入这个服务：

• 祖父组件（如果需要初始化或修改数据）：

angular.module('yourApp').component('grandparent', {
  template: '<parent></parent>',
  controller: function(PersonService) {
    // 可以在这里更新服务里的数据，所有用到的组件都会同步
    // PersonService.person.name = 'UpdatedName';
    this.person = PersonService.person;
  }
});

• 孙组件直接使用：

angular.module('yourApp').component('grandson', {
  template: '<title>{{ $ctrl.person.name }}</title>',
  controller: function(PersonService) {
    this.person = PersonService.person;
  }
});

3. 利用作用域继承（不推荐组件使用，适合老指令场景） #

如果你的组件没有设置隔离作用域（也就是没有写scope: {}），子组件会继承父组件的$scope，祖父作用域里的变量会一直往下传递。不过组件设计的初衷就是隔离作用域，所以这种方式只适合临时应急或者老项目的指令场景。

示例：
祖父组件控制器把数据挂到$scope上：

angular.module('yourApp').component('grandparent', {
  template: '<parent></parent>',
  controller: function($scope) {
    $scope.person = { name: 'William', age: 102 };
  }
});

父组件和孙组件不要设置隔离作用域，直接在孙组件模板里使用：

<!-- grandson 模板 -->
<title>{{ person.name }}</title>

4. 用$rootScope（不推荐，易造成全局污染） #

把数据放到$rootScope里，所有组件的作用域都能访问到，但这种方式会污染全局作用域，调试和维护都很麻烦，只适合非常简单的小项目应急用。

祖父组件控制器里：

angular.module('yourApp').component('grandparent', {
  template: '<parent></parent>',
  controller: function($rootScope) {
    $rootScope.person = { name: 'William', age: 102 };
  }
});

孙组件模板里直接用：

<title>{{ $root.person.name }}</title>

总结一下优先级：服务共享 > 逐层绑定传递 > 作用域继承 > $rootScope，根据你的项目场景选最合适的就行。

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