Question

让我举一个例子，如果我可以使用3个组件：

<grandparent>
    <parent>
        <grandson>

如果祖父母有一个对象，那就让我们说一个人

const person = {
    name: 'William',
    age: 102
}

孙子如何能够从祖父母那里继承这个价值？

<title={{ $ctrl.person.name }}>

不起作用，因为$ctrl将是父母。

希望我的轻松榜样如此。

Answer 1

Check this plunkr

以下是更新后的代码：

<grand-parent>
  <cbs-cus-comp com-bind='grandParentCntAs.name'>
    <child child-com-bind='cbsCusCompCntAs.name'></child>
  </cbs-cus-comp>
</grand-parent>

您需要提供类似下面的内容才能实现这一目标：

  var cbsCusComp        =   {
                            transclude  :   true,
                            require: {grandParentComp:'^grandParent'},
                            template    :   'Parent : <b>{{cbsCusCompCntAs.comBind}}</b><br /><ng-transclude></ng-transclude>',
                            controller  :   cbsCusCompCnt,
                            controllerAs:   'cbsCusCompCntAs',
                            bindings    :   {comBind:'='}
                        };

Answer 2

你在这里几乎没有选择：

向下钻取person对象，将其传递给父对象，从父对象传递给孙子
使用服务存储人物对象，孙子使用该服务获取人物对象
使用redux

Answer 3

来自文档：

组件间通信

指令可以require其他指令的控制器以实现彼此之间的通信。这可以通过为require属性提供对象映射来在组件中实现。对象键指定属性名称，在该属性名称下，所需的控制器（对象值）将绑定到需要组件的控制器。

— AngularJS Developer Guide - Intercomponent Communication

有关详细信息，请参阅AngularJS Comprehensive Directive API Reference - require

angularjs将祖父母传给孙子与组件

3 个答案:

组件间通信