Передача событий от родителя к потомку в компонентах AngularJS

передача событий от родителя к ребенку в компонентах 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 атрибут с его API, выставленным как $API. Преимущество этого подхода заключается в том, что родитель может реагируйте на дочернюю инициализацию, передавая функцию дочернему компоненту с угловым выражением.

документы:

хэш объекта области "изолировать"определяет набор свойств локальной области, производных от атрибутов элемента директивы. Эти локальные свойства полезны для сглаживания значений шаблонов. Ключи в хэш-сопоставлении объекта с именем свойства в области изолировать; значения определяют, как свойство привязано к родительская область, через соответствующие атрибуты элемента директивы:

• & или &attr - предоставляет способ выполнения выражения в контексте родительской области. Если имя attr не указано, то предполагается, что имя атрибута совпадает с локальным именем. Дано <my-component my-attr="count = count + value"> и область определения области изоляции:{ localFn:'&myAttr' }, изолировать область недвижимость localFn укажет на оболочку функции для count = count + value expression. Часто желательно передавать данные из изолированная область через выражение для родительской области. Это можно сделать, передав карту имен и значений локальных переменных в оболочку выражений FN. Например, если выражение increment($amount) затем мы можем указать значение суммы, вызвав localFn as localFn({$amount: 22}).

-- AngularJS всеобъемлющая директива API -- scope

в качестве соглашения я рекомендую префикс локальных переменных с $ чтобы отличить их от родительские переменные.

попеременно используйте двунаправленную привязку

Примечание: чтобы облегчить переход на угловой 2+, Избегайте использования двунаправленного = привязка. Вместо этого используйте односторонний < привязка и выражение & привязка. Дополнительные сведения см. В разделе AngularJS Руководство Разработчика-Понимание Компонентов.

чтобы разрешить родительским компонентам связывать события с дочерним компонентом, у ребенка опубликовать API:

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

в приведенном выше примере grid-component использует привязки для публикации своего 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.