Передача событий от родителя к дочернему элементу в компонентах 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++;
    }
  }
});

В приведенном выше примере вызывается выражение Angular, определенное атрибутом grid-on-init, с его API, представленным как $API. Преимущество этого подхода заключается в том, что родитель может реагировать на инициализацию дочернего элемента, передавая функцию дочернему компоненту с помощью Angular Expression.

Из документов:

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

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

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

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

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

ПРИМЕЧАНИЕ. Чтобы упростить переход на 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.

Вот простой способ: http://morrisdev.com/2017/03/triggering-events-in-a-child-component-in-angular/

в основном вы добавляете связанную переменную с именем «команда» (или что угодно) и используете $onChanges, чтобы обращать внимание на изменения этой переменной и запускать любое событие, которое, по его словам, должно запускаться вручную.

Лично мне нравится помещать все мои переменные в объект под названием «Настройки» и отправлять его всем моим компонентам. Однако изменение значения внутри объекта НЕ вызывает событие $onChanges, поэтому вам НЕОБХОДИМО сообщить ему, чтобы он запускал событие с плоской переменной.

Я бы сказал, что это не «правильный» способ сделать это, но, безусловно, его намного проще программировать, намного проще понять и намного проще преобразовать в A2 позже в будущем.

Я столкнулся с тем же вопросом. Что вы думаете об этом подходе: использовать наследование через require вместо двунаправленного связывания?

http://plnkr.co/edit/fD1qho3eoLoEnlvMzzbw?p=preview

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

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

    app.component('filterComponent', {
      template: `
        <h3>Filter component</h3>
        <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Search</a>
        <span data-ng-bind="$ctrl.childMessage"></span>

        <grid-component api="$ctrl.gridApi"></grid-component>
      `,
      controller: function() {
        var ctrl = this;

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

    app.component('gridComponent', {
      require: {parent:'^^filterComponent'},
      bindings: {api: "<"},
      template: `
        <h4>Grid component</h4>
        <p> Save count = {{$ctrl.count}}
      `,
      controller: function() {
        var ctrl = this;



        this.$onInit = function() {
            ctrl.count = 0;
            ctrl.api = {};
            ctrl.api.save = save;

            ctrl.parent.gridApi = ctrl.api;
        };
        function save(){
          console.log("saved!");
          ctrl.count++;
        }
      }
    });

Или мы можем определить метод установки для родителя, чтобы сделать его более явным.

http://plnkr.co/edit/jmETwGt32BIn3Tl0yDzY?p=preview

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

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

app.component('filterComponent', {
  template: `
    <h3>Filter component</h3>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Search</a>
    <span data-ng-bind="$ctrl.childMessage"></span>

    <grid-component pass-api="$ctrl.setGridApi(api)"></grid-component>
  `,
  controller: function() {
    var ctrl = this;

    var gridApi = {};

    ctrl.setGridApi = function(api){
      gridApi = api;
    };

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

app.component('gridComponent', {
  bindings: {
    passApi:'&'
  },
  template: `
    <h4>Grid component</h4>
    <p> Save count = {{$ctrl.count}}
  `,
  controller: function() {
    var ctrl = this;

    this.$onInit = function() {
        ctrl.count = 0;
        ctrl.api = {};
        ctrl.api.save = save;

        ctrl.passApi({api: ctrl.api});
    };
    function save(){
      console.log("saved!");
      ctrl.count++;
    }
  }
});

ПРОСТО: вам просто нужно одно свойство с 1-сторонней привязкой, потому что 2-сторонняя привязка вызывает только onChanges при создании.

1. Установите новое логическое свойство на родительском контроллере.

   vm.changeNow = ложь; //обновите это на vm.changeNow = !vm.changeNow, когда вы хотите, чтобы компонент //вызывал метод.

2. Откройте дочерний компонент, в разделе привязок

   привязки: { a2waybind: '=', changenow: '‹' }

3. Теперь вам нужно событие $onChanges для дочернего элемента.

   $onChanges() { // делаем те приятные вещи, которые вы хотели услышать от родителя. }

4. Теперь при вызове шаблона:

   дочерний компонент a2waybind="$ctrl.mycoolvalue" changenow="$ctrl.changeNow" /childComponent"

Второй способ сделать это в вашем дочернем компоненте:

        var vm = this;
        var myprop;
        Object.defineProperty(vm, 'mytwowayprop', {
            get() {
                return myprop;
            },
            set(value) {
                myprop = value; 
                vm.onchangeseventbecausemypropchanged();               
            }
        });
       vm.onchangeseventbecausemypropchanged = function () {//woot}

Это позволит вам иметь определенное событие onchanges, когда ваше свойство двусторонней привязки изменяется как внутри, так и снаружи.