使用对象内容 - 使用`$doCheck`生命周期挂钩¹

Question

我正在尝试通过单向绑定变量将一组计数作为对象传递并获得无限摘要，因为我绑定到组件的方法每次都返回一个新对象。这是一个例子：

在父组件模板中：

<some-component counts="$ctrl.selectedCounts()"></some-component>

父组件定义：

angular.module().component('parentComponent', {
  controller() {
    return {
      selectedCounts() {
        return {
          [this.selectedThing1.length > 1 ? 'thing' : 'things']: this.selectedThing1.length,
          [this.selectedThing2.length > 1 ? 'thing' : 'things']: this.selectedThing2.length,
        }
      }
    }
  }
})

如何绑定此counts绑定，以便在不改变父组件中的对象并将其传递给some-component的情况下不创建无限摘要？我已经尝试使用=*作为some-component中的绑定，但是它不会创建无限的摘要周期，但是由于某种原因它也不会将更改传播到子组件。 / p>

这是一个有同样无限摘要的小提琴： http://jsfiddle.net/joshdmiller/HB7LU/

Answer 1

使用对象内容 - 使用`$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
      };
    }
})

来自文档：

控制器可以提供以下充当生命周期钩子的方法：


$doCheck() - 在摘要周期的每个回合调用。提供检测和处理更改的机会。必须从此挂钩调用您希望采取的任何响应您检测到的更改的操作;实现这一点对于调用$onChanges时没有影响。例如，如果您希望执行深度相等检查，或检查Date对象，Angular的更改检测器无法检测到的更改，则此挂钩可能非常有用>因此不会触发$onChanges。这个钩子在没有参数的情况下被调用;如果检测到更改，则必须将以前的值进行比较与当前值。


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

欲了解更多信息，

将新对象传递给角度绑定时出现无限摘要错误

1 个答案:

使用对象内容 - 使用`$doCheck`生命周期挂钩¹

将新对象传递给角度绑定时出现无限摘要错误

1 个答案:

使用对象内容 - 使用$doCheck生命周期挂钩 1

使用对象内容 - 使用`$doCheck`生命周期挂钩¹