何时使用AngularJS`$ onInit`生命周期挂钩

时间:2018-07-10 20:35:58

标签: angularjs angularjs-directive angularjs-components angularjs-1.7

随着AngularJS V1.7的发布,不推荐使用预先取消绑定的选项并将其删除:

  

由于38f8c9方向绑定在构造函数中不再可用

     

要迁移代码,请执行以下操作:

     
      
  • 如果您指定了$compileProvider.preAssignBindingsEnabled(true),则需要首先迁移代码,以便将标志翻转到false"Migrating from 1.5 to 1.6" guide中提供了有关操作方法的说明。然后,删除$compileProvider.preAssignBindingsEnabled(true)语句。
  •   
     

— AngularJS Developer Guide - Migrating to V1.7 - Compile

  

由于bcd0d4,默认情况下禁用控制器实例上的预分配绑定。 我们强烈建议迁移您的应用程序,使其不要尽快依赖它。

     

依赖于存在的绑定的初始化逻辑应放在控制器的$onInit()方法中,该方法保证在分配了绑定后总是被称为

     

-- AngularJS Developer Guide - Migrating from v1.5 to v1.6 - $compile

必须将代码移至$onInit Life-Cycle Hook的用例是什么?什么时候才能将代码保留在控制器构造函数中?

1 个答案:

答案 0 :(得分:3)

当代码依赖绑定时,必须在$onInit函数中移动代码,因为这些绑定在构造函数的this中不可用。它们在组件类的实例化之后被分配。

示例: 您具有如下状态定义:

$stateProvider.state("app", {
  url: "/",
  views: {
    "indexView": {
      component: "category"
    }
  },
  resolve: {
    myResolve: (someService) => {
      return someService.getData();
    }
  }
});

您可以像这样将myResolve的结果绑定到组件:

export const CategoryComponent = {
  bindings: {
    myResolve: "<"
  },
  controller: Category
};

如果您现在在this.myResolveconstructor中退出$onInit,将会看到类似这样的内容:

constructor() {
  console.log(this.myResolve); // <-- undefined
}

$onInit() {
  console.log(this.myResolve); // <-- result of your resolve
}

因此,您的构造函数应仅包含以下构造代码:

constructor() {
  this.myArray = [];
  this.myString = "";
}

每个特定于角度的初始化和绑定或依赖项的使用都应在$onInit