在AngularJS组件中将事件从父级传递到子级

使用表达式绑定发布指令$ API

要允许父组件将事件传达给子组件，请让子组件发布API：

<grid-component grid-on-init="$ctrl.gridApi=$API; $ctrl.someFn($API)">
</grid-component>

JS

app.component('gridComponent', {
  //Create API binding
  bindings: {gridOnInit: "&"},
  template: `
    <h4>Grid component</h4>
    <p> Save count = {{$ctrl.count}}</p>
  `,
  controller: function() {
    var ctrl = this;
    this.$onInit = function() {
        ctrl.count = 0;
        ctrl.api = {};
        //Publish save function
        ctrl.api.save = save;
        //Invoke Expression with $API as local
        ctrl.gridOnInit({$API: ctrl.api});
    };
    function save(){
      console.log("saved!");
      ctrl.count++;
    }
  }
});

上面的示例调用grid-on-init属性定义的Angular Expression
，其API公开为$API。这种方法的优点是，父级可以通过将函数传递给带有Angular Expression的子级组件来对子级初始化做出反应。

从文档中：

“隔离”范围对象哈希定义了一组从指令元素上的属性派生的局部范围属性。这些本地属性对于为模板的别名设置别名很有用。对象哈希中的键映射到隔离范围内的属性的名称。这些值通过匹配指令元素上的属性来定义如何将属性绑定到父作用域：

• &或&attr-提供一种在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。给定<my- component my-attr="count = count + value">和隔离范围定义scope：{ localFn:'&myAttr' }，isolate scope属性localFn将指向的函数包装count = count + value expression。通常，需要将数据从隔离范围通过表达式传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。例如，如果表达式为，increment($amount)则可以通过调用localFnas
  来指定金额值localFn({$amount: 22})。
  

- AngularJS综合指令API
-范围

按照惯例，我建议给局部变量加上前缀，$以将其与父变量区分开。

交替使用双向绑定

注意： 为简化向Angular
2+的过渡，请避免使用双向=绑定。而是使用单向<绑定和表达式&绑定。有关更多信息，请参阅《AngularJS开发人员指南-
了解组件》。

要允许父组件将事件传达给子组件，请让子组件发布API：

<grid-component api="$ctrl.gridApi"></grid-component>

在上面的示例中，grid-component使用api属性使用绑定将其API发布到父级作用域上。

app.component('gridComponent', {
  //Create API binding
  bindings: {api: "="},
  template: `
    <h4>Grid component</h4>
    <p> Save count = {{$ctrl.count}}</p>
  `,
  controller: function() {
    var ctrl = this;
    this.$onInit = function() {
        ctrl.count = 0;
        ctrl.api = {};
        //Publish save function
        ctrl.api.save = save;
    };
    function save(){
      console.log("saved!");
      ctrl.count++;
    }
  }
});

然后，父组件可以save使用已发布的API 调用子函数：

ctrl.click = function(){
  console.log("Search clicked");
  ctrl.gridApi.save();
}

在上PLNKR DEMO。