Как наблюдать изменение привязки компонентов с помощью компонента Angular

Ответ 1

теперь, когда элементы меняются, я хочу выполнить другое действие, используя это значение, Как мне это сделать?

Но я хочу, чтобы избежать использования области памяти

Если вы не хотите использовать $scope, вы можете использовать средство настройки свойств для обнаружения любых изменений, например.:

class MyController {
    private _items: string[] = []
    set items(value:string[]){
        this._items = value;
        console.log('Items changed:',value);
    }
    get items():string[]{
        return this._items;
    }
}

const ctrl = new MyController();
ctrl.items = ['hello','world']; // will also log to the console

Обратите внимание, что вы не должны использовать его для сложной логики (причины: https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html) 🌹

Ответ 2

Вы можете добавить метод $onChanges к контроллеру

$onChanges(changesObj) вызывается при обновлении односторонних привязок. ИзмененияObj - хэш, ключи которого являются именами связанных свойств, которые изменились, а значения являются объектом формы.

В следующем примере обрабатывается событие canChange change.

angular.module('app.components', [])
.component('changeHandler', {
  controller: function ChangeHandlerController() {
    $onChanges: function (changes) {
      if (changes.canChange) 
       this.performActionWithValueOf(changes.canChange);
    };
  },
  bindings: {
    canChange: '<'
  },
  templateUrl: 'change-handler.html'
});

Ответ 3

Здесь приведен пример версии basarat версии ES5.1:

function MyController() {
  var items = [];

  Object.defineProperty(this, 'items', {
    get: function() {
      return items;
    },

    set: function(newVal) {
      items = newVal;
      console.log('Items changed:', newVal);
    }
  });
}

Использование Object.defineProperty(). Поддерживается всеми основными браузерами и IE9 +.

Ответ 4

Я нашел способ, но не уверен, что он наиболее эффективен. Сначала введите $scope в качестве зависимости и установите его в this._scope или тому подобное в своем конструкторе. В моей функции $onInit у меня есть следующее:

this._scope.$watch(() => {
    return this.items;
  },
  (newVal, oldVal) => {
    // Do what you have to here
  });

Он очень вдохновлен ответом здесь: Angularjs: "контроллер как синтаксис" и $watch

Надеюсь, это поможет, это то, что я собираюсь использовать, пока мне не говорят иначе.

Ответ 5

В настоящее время вы не можете использовать angular наблюдателей без $scope, поскольку обнаружение изменений основано на $scope. Даже если вы используете выражения в HTML, делегировать функции наблюдения в $scope.

Даже если вы создаете какой-то другой механизм для просмотра, вам нужно будет помнить, что вы не вручную, а с помощью параметра $scope это делается автоматически.