Angular 1.5组件onChanges无效

Question

由于我们有非常大的Angular 1.x应用程序,我们无法将其完全升级到Angular 2,但我喜欢新架构.版本1.5为component旧的相同应用程序带来惊人的s.作为所有很酷的东西,它缺乏文档;-)

所以,这是一个问题.我在控制器的定义中有这两行:

this.$onInit = setType;
this.$onChanges = setType;

第一个是工作,而第二个不工作.我正在使用'<'绑定.因此,在第一次加载时,组件的状态根据传递的值设置,而更改未反映.我希望它应该从[1]和[2]起作用.

[1] https://docs.angularjs.org/guide/component

[2] https://angular.io/docs/js/latest/api/core/OnChanges-interface.html

UPD好的,我已经知道它不应该工作:https: //github.com/angular/angular.js/issues/14030

有人知道好的解决方法吗？

UPD2从1.5.3开始工作

Answer 1

从AngularJs 1.5.3开始,假设ctrl.someModel在子组件中单向绑定,以下内容不会触发$ onChanges.

function get() { 
  api.getData().then( (data) => {
    ctrl.someModel.data = data
  }
}

似乎更新对象的属性似乎不会被识别为更新.

这就是我目前如何解决它.我不相信它是最好的解决方案,但它会触发$ onChanges.我创建了我的初始模型的深层副本,将数据添加为其中一个属性,然后将我的初始模型设置为新对象的值.本质上,我更新了生命周期钩子拾取的整个对象:

function get() { 
  api.getData().then( (data='42') => {
    const updatedModel = angular.copy(ctrl.someModel)
    updatedModel.data = data
    ctrl.someModel = updatedModel
  }
}

在子组件中(假设模型被绑定为'数据'):

this.$onInit = function(bindings) {
  if (bindings.data && bindings.data.currentValue) {
    console.log(bindings.data.currentValue) // '42' 
  }
}

Answer 2

处理$onChanges是棘手的.实际上,这就是为什么在版本1.5.8中他们引入了$doCheck类似于Angular 2 ngDoCheck的原因.

这样,您可以手动侦听正在侦听的对象内部的更改,而钩子不会发生更改$onChanges(仅在更改对象的引用时调用).同样的事情,但它会被调用每个摘要周期,允许您手动检查更改(但比手表更好).

有关更多详细信息,请参阅此博客文章

Answer 3

据我所知,这个$onChanges和$onInit方法都应该与AngularJS 1.5.3版一起使用.

我创建了一个演示两种用法的plnkr.

它有两个组件,一个是外部组件和一个内部组件,其中一个值使用单向绑定操作符从外部组件绑定到内部组件<.输入字段更新外部组件的值.在输入到输入字段的每个键盘上,该$onChanges方法被触发(打开控制台以查看).

angular.module("app", [])
.component("outer", {
    restrict: "E", 
    template: `<input ng-model=$ctrl.value> <br /> 
            <inner value="$ctrl.value">
            </inner>`
})  
.component("inner", {
    restrict: "E", 
    template: `{{$ctrl.value}}`, 
    bindings: {
       value: "<"
    },
    controller: function(){
       function setType() { 
          console.log("called");
       }
       this.$onInit = setType;
       this.$onChanges = setType;
   }
});