Angular 1.5 组件 onChanges 不起作用

Angular 1.5 component onChanges is not working

本文关键字：onChanges 不起作用 组件 Angular      更新时间：2023-09-26

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

所以，这里有一个问题。我在控制器的定义中有这两行：

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 开始工作

从 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' 
  }
}
处理

$onChanges很棘手。实际上，这就是为什么在1.5.8版本中他们引入了 $doCheck ，类似于Angular 2 ngDoCheck。

这样，您可以手动侦听正在侦听的对象内部的更改，而$onChanges钩子不会发生这种情况（仅在对象的引用更改时调用）。这是一回事，但是每个摘要周期都会调用它，允许您手动检查更改（但比监视更好）。

据我所知，$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;
   }
});

基本上，当角度找到引用的变化（而不是更改对象中的属性）时，$onChanges角度生命周期钩子触发器，因此为了调用子对象中的$onChanges，在父对象中，分配新对象。 例如，

angular.module("app", [])
.component("outer", {
    restrict: "E", 
    controller : function(){
        this.value = {};
        this.userButtonClick = function(someValue){
            this.value = angular.copy(someValue);
        }
    },
    template: `<input ng-click="$ctrl.userButtonClick({somevalue : "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 = function(changeObj){
               console.log("changed value",changeObj.value.currentValue);
           }
       }
    });

除非您真的想在每个摘要周期中触发回调，否则不要使用 $doCheck，因为无论是否进行某些绑定更改，都会在每个$digest周期中调用它。

相关文章：