$onChanges 未触发

Question

按模型获取更新但不更新模型。我应该使用 $onChanges 函数

我有一个型号:

class Model {
  constructor(data) {
    this.data = data;
  }
  getData() {
    return this;
  }
}

2 个嵌套组件：

var parentComponent = {
  bindings: {
    vm: '<'
  },
  controller: function() {
    var ctrl = this;
  },
  template: `
    <div>
      <a ui-sref="hello.about" ui-sref-active="active">sub-view</a>
      Parent component<input ng-model="$ctrl.vm.data">
      <ui-view></ui-view>
    </div>
  `
};

var childComponent = {
  bindings: {
    vm: '<'
  },
  template: `
    <div>
      Child component <input ng-model="$ctrl.vm.data">
      <br/>
      Child component copy<input ng-model="$ctrl.vmCopy.data">
      <br/>
      Child component doCheck<input ng-model="$ctrl.vmCheck.data">
      </div>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.$onChanges = function(changes) {
      ctrl.vmCopy = angular.copy(ctrl.vm);
      ctrl.vm = ctrl.vm;
    };
    ctrl.$doCheck = function () {
      var oldVm;
      if (!angular.equals(oldVm, ctrl.vm)) {
        oldVm = angular.copy(ctrl.vm);
        ctrl.vmCheck = oldVm;
        console.log(ctrl)
      }
    }
  }
}

两者都从解析中获取数据：

.config(function($stateProvider) {
    var helloState = {
      name: 'hello',
      url: '/hello',
      resolve: {
        vm: [function() {
          return myModel.getData();
        }]
      },
      component: 'parent'
    }

    var aboutState = {
      name: 'hello.about',
      url: '/about',
      resolve: {
        vm: [function() {
          return myModel.getData();
        }]
      },
      component: 'child'
    }
    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);

  })

我希望我的组件在模型更改或父级更改时更新，但我不希望它们更新模型。

我认为这就是为什么绑定“<”代表一种方式。

这里有一个 fiddle 来说明我想做什么。

换句话说：我希望子组件在父组件更改时更新，但不希望子组件更新父组件。

您可以在 fiddle 中看到，如果我直接绑定到本地范围，子级会从父级获得更新，但也会更新父级

如果我将绑定复制到本地范围，子项不会更新父项，但也不会被父项更新。如果

Answer 1

With object content — 使用`$doCheck`生命周期钩子

绑定对象或数组引用时，$onChanges 挂钩仅在引用的值发生变化时执行。要检查对对象或数组的内容的更改，请使用 $doCheck 生命周期挂钩：

app.component('nvPersonalTodo', {
  bindings: {
    todos: "<"
  },
  controller: function(){
    var vm = this;
    this.$doCheck = function () {
      var oldTodos;
      if (!angular.equals(oldTodos, vm.todos)) {
        oldTodos = angular.copy(vm.todos);
        console.log("new content");          
        //more code here
      };
    }
})

来自文档：

The controller can provide the following methods that act as life-cycle hooks:

$doCheck() - Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called. For example, this hook could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not be detected by Angular's change detector and thus not trigger $onChanges. This hook is invoked with no arguments; if detecting changes, you must store the previous value(s) for comparison to the current values.

— AngularJS Comprehensive Directive API Reference -- Life-cycle hooks

欲了解更多信息，

AngularJS angular.equals API Reference

$onChanges 未触发

$onChanges not triggered

javascript

angularjs

angularjs-components

按模型获取更新但不更新模型。我应该使用 $onChanges 函数

With object content — 使用`$doCheck`生命周期钩子

$onChanges 未触发

$onChanges not triggered

javascript

angularjs

angularjs-components

按模型获取更新但不更新模型。我应该使用 $onChanges 函数

With object content — 使用$doCheck生命周期钩子

With object content — 使用`$doCheck`生命周期钩子