$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>
  `
};

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

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

.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);

  })

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

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

这是一个小提琴来说明我想做的事情。

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

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

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

Answer 1

对于对象内容\xe2\x80\x94 使用$doCheck生命周期挂钩¹

\n

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

\n

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

\n

来自文档：

\n

\n

控制器可以提供以下方法作为生命周期钩子：

\n

\n
• $doCheck()- 在摘要循环的每个回合中调用。提供检测变化并采取行动的机会。您希望针对检测到的更改采取的任何操作都必须从此挂钩调用；$onChanges实现这个对调用时间没有影响。例如，如果您希望执行深度相等检查，或者检查 Date 对象，而 Angular 的更改检测器无法检测到该对象的更改，因此不会触发，则此钩子可能会很有用$onChanges。该钩子的调用不带任何参数；如果检测到更改，则必须存储以前的值以便与当前值进行比较。
\n

\n

\xe2\x80\x94 AngularJS 综合指令 API 参考 -- 生命周期钩子

\n

\n

了解更多信息，

\n

\n
• AngularJS angular.equals API 参考
\n
• AngularJS 1.5+ 组件不支持观察者，解决方法是什么？
\n

\n