代码之家 › 专栏 › 技术社区 › georgeawg

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

angularjs-1.7 angularjs-components angularjs-directive angularjs

5

georgeawg · 技术社区 · 7 年前

随着AngularJS v1.7的发布,预先分配绑定的选项已被否决并删除:

由于 38f8c9 , 指令绑定在构造函数中不再可用 .

要迁移代码:

如果您指定 $compileProvider.preAssignBindingsEnabled(true) 您需要首先迁移代码,以便可以将标记翻转到 false . 有关如何执行此操作的说明,请参见 "Migrating from 1.5 to 1.6" guide . 然后,移除 $compileProvider.PreassignBindingsEnabled(真) 声明。

— 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 回复 | 直到 7 年前

1

3

scipper 7 年前

必须在中移动代码 $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.myResolve 在 constructor 而在 $OnInit公司 您将看到如下内容:

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

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

因此,构造函数应该只包含如下构造代码:

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

每个角度特定的初始化和绑定或依赖使用都应该在 $OnInit公司