javascript - 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

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

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

因此，您需要:1) 手动绑定(bind)到您想要的一个或多个属性，而不是对象引用，或者 2) 在数据更改时更改整个 standardsData 对象。 您还可以 3) 重写 $onChanges 功能，我想(不推荐)。

选项 1:仅绑定(bind)到属性

如果父 Controller /组件仅更改一个或多个属性，则使用。

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

和

bindings: {
    standardsDataSomething: '<'
}

选项 2:更改引用

如果父 Controller /组件获得全新的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/