javascript - 在 Angular 分量中使用$ onChanges与$ onInit

Controller1和Controller2之间有区别吗？

angular.module('app', [])
.component('foo', {
    templateUrl: 'foo.html',
    bindings: {
        user: '<',
    },
    controller: Controller1, //Or Controller2
});

function Controller1(){
    this.$onInit = function(){
      this.user = angular.copy(this.user);
    };

    this.$onChanges = function(changes){
      if(changes.user && !changes.user.isFirstChange()){
        this.user = angular.copy(changes.user.currentValue);
      }
    };
}


function Controller2(){
    this.$onChanges = function(changes){
      if(changes.user){
        this.user = angular.copy(changes.user.currentValue);
      }
    };
}

当我可以在$onInit中执行相同的操作并保存一些行时，为什么还要打扰$onChanges？

对于其他某种初始化，这种类型的初始化在$onChanges和$onInit中是否更好？

最佳答案

$ onInit

在构造完一个元素上的所有 Controller 并初始化了它们的绑定(bind)之后(并且在此元素上的指令的pre和post链接功能之前)，在每个 Controller 上调用。这是放置 Controller 初始化代码的好地方。

$ on更改

调用$ onChanges生命周期 Hook 有几个原因。首先是组件初始化，它在运行时将初始更改传递给对象，因此我们可以立即获取数据。它被调用的第二个原因仅是发生在与父组件绑定(bind)的“$onChanges后，您将获得一个特殊的更改，您可以将其挂接到对象上，我们将在接下来的部分中进行探讨。

实际的主要区别是$onInit仅在指令初始化时被调用，但是$onChanges将在初始化期间以及<和@变量更改时被调用。

关于javascript - 在 Angular 分量中使用$ onChanges与$ onInit，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41567261/