Question

我在html页面中有角度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。

换句话说，只有当我们使用基元（即非对象）或更改绑定到基础的javascript对象的引用时，才会触发$onChanges。成分

因此，您需要：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/

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

1 个答案: