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 的组件是绑定到 object 引用，即使修改其中一个属性也不会更改。结果，$onChanges 没有被触发。这是因为 $onChanges 使用浅 $watch.

换句话说，只有当我们使用基元（即non-objects）或更改引用[=时才会触发$onChanges javascript object 的 54=] 绑定到组件中

因此，您需要：1) 手动绑定到您想要的 property/properties，而不是 object 引用，或者 2) 更改整个 standardsData object 当它的数据改变时。 你也可以 3) 重写 $onChanges 功能，我想（不推荐）.

选项 1：仅绑定到属性

如果 parent controller/component 仅更改属性或属性，则使用。

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

和

bindings: { standardsDataSomething: '<' }

选项 2：更改引用

如果 parent controller/component 获得全新 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/

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

AngularJS 1.5 component won't invoke $onChanges upon change

html

javascript

components

angularjs

angularjs-components