AngularJS 1.5 组件在更改时不会调用 $onChanges

Question

我在 html 页面中有一个 AngularJS 1.5 组件（不是父组件） 并且组件不会在更改时调用 $onChanges。

HTML

<my-comp standards-data="standardsData"></my-comp>

组件

angular.module("bla").component('myComp', {
    templateUrl: '/my-comp.tpl.html',
    controller: myController,
    bindings: {
        standardsData: '<'
    }
});

function myController() {
    var self = this;

    self.$onInit = function () {
        self.standardsData = {};
    }

    self.$onChanges = function (changes) {
        self.standardsData.something = changes.standardsData.currentValue.something;
    };
}

当我在包含我的组件的 html 的 ctrl 中获取新数据时， 它不会影响组件。我只进入组件的$onInit 在$scope.standardsData 更改之后（在包含的html/ctrl 中）， 我的组件的$OnChanges 不会调用。

希望我正确描述了问题， 谢谢！

Answer 1

你的组件绑定到standardsData 是一个对象引用的绑定，即使它的一个属性被修改，它也不会改变。因此，$onChanges 不会被触发。这是因为$onChanges 使用了浅$watch。

换句话说，$onChanges 仅在我们使用原语（即非对象）或更改绑定到组件中的javascript对象的引用时才会触发

因此，您需要：1) 手动绑定到所需的属性，而不是对象引用，或者 2) 在其数据更改时更改整个 standardsData 对象。 你也可以 3) 重写 $onChanges 功能，我想（不推荐）。

选项 1：仅绑定到属性

在父控制器/组件仅更改一个或多个属性时使用。

<my-comp standards-data-something="standardsData.something"></my-comp>

和

bindings: {
    standardsDataSomething: '<'
}

选项 2：更改引用

在父控制器/组件获得全新的standardsData 时使用。您将为此选项保留当前的 ​​HTML 并设置：

standardsData = {newData};  //Reset the new data from http or wherever

更改引用。

---

一些你可能会感兴趣的进一步阅读：

http://blog.kwintenp.com/the-onchanges-lifecycle-hook/

http://www.codelord.net/2016/12/20/replacing-angulars-deep-watches-with-the-%24docheck-lifecycle-hook/