javascript - AngularJS 如何从父组件触发子组件中的函数？

Question

通过在子组件中使用 & 绑定(bind)，我们可以运行作为父组件 Controller 一部分的功能。我正努力在相反的方向上做同样的事情——当父组件发生某些事情时，子组件运行函数。

我有 mapComponent，它是 mainComponent 的直接子级。 mapComponent 显示带有一些标记的全屏 Google map (使用 NgMap)。 mainComponent 处理登录和注册。如果用户开始注册，我需要在 mapComponent 中运行删除所有标记并附加 map 事件的函数，以便用户可以单击 map 以显示他是否居住，并且可以在注册时保存这些坐标。

举个例子，不会太复杂，这里是来自 plunker 的代码我在搜索 stackoverflow 时发现:

var app = angular.module('plunker', []);

app.controller('RootController', function() {});

app.component('parentComponent', {
  template: `
    <h3>Parent component</h3>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Child</a>
    <span data-ng-bind="$ctrl.childMessage"></span>
    <child-component on-change="$ctrl.notifiedFromChild(count)" message="$ctrl.message"></child-component>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.notifiedFromChild = function(count) {
      ctrl.childMessage = "From child " + count;
    }
    ctrl.click = function() {
      ctrl.message = Math.random()
    }
  },
  bindings: {}
});

app.component('childComponent', {
  template: `
    <h4>Child component</h4>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Parent</a>
    <span>{{$ctrl.parentMessage}}</span>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.counter = 0;
    ctrl.click = function() {
      ctrl.onChange({
        count: ++ctrl.counter
      });
    }
  },
  bindings: {
    onChange: '&',
    parentMessage: '<message'
  }
});

在此示例中，通过单击父组件中的按钮，我可以通过数据绑定(bind)更改子组件中的 parentMessage 值。但是，我想找到一种方法让子组件在父组件要求时自行更改此值。

Answer 1

一个可能的解决方案是在父级中创建一个 register 函数，如下所示:

ctrl.register = function(child){
    ctrl.childCtrl = child;
}

然后使用常规回调绑定(bind)将此register 函数传递给 child ，让 child 调用它。像这样:

app.component('childComponent', {
    bindings: {
        registerParent: '&'
    }
    controller: function() {
        var ctrl = this;

        // Register the child controller with the parent.
        ctrl.registerParent({childRef: ctrl});

        ctrl.childFunction = function(message) {
            console.log('Child function: ' + message);
        }
    },
    // ...and so on
});

然后通过模板传递给它

<child-component register-parent="$ctrl.register(childRef)" />

在此之后，您可以使用 childRef 变量从父 Controller 调用子 Controller 的任何函数。因此，例如在您的 parent 中，您可以这样做:

ctrl.childRef.childFunction("called from parent")

这应该将以下内容记录到控制台中:子函数:从父函数调用

我创建了一个 Plunker to show this working.