何时使用 AngularJS `$onInit` 生命周期钩子 [英] When to use the AngularJS `$onInit` Life-Cycle Hook

问题描述

随着 AngularJS V1.7 的发布，预先分配绑定的选项已被弃用和删除:

<块引用>

由于 38f8c9，指令绑定不再适用于构造函数.

要迁移您的代码:

• 如果您指定了 $compileProvider.preAssignBindingsEnabled(true)，您需要先迁移您的代码，以便可以将标志翻转为 false." 中提供了有关如何执行此操作的说明;从 1.5 迁移到 1.6"指南.然后，删除 $compileProvider.preAssignBindingsEnabled(true) 语句.

— AngularJS 开发人员指南 - 迁移到 V1.7 - 编译>

<块引用>

由于 bcd0d4，控制器实例上的预分配绑定被禁用默认.我们强烈建议您尽快迁移您的应用程序，不要依赖它.

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

— AngularJS 开发人员指南 - 从 v1 迁移.5 到 v1.6 - $compile

当代码必须移动到 $onInit 生命周期钩子?我们什么时候可以把代码留在控制器构造函数中?

解决方案

代码必须在 $onInit 函数中移动，当它依赖于绑定时，因为这些绑定在 this 在构造函数中.它们在组件类实例化后被分配.

示例:您有这样的状态定义:

$stateProvider.state("app", {网址:/"，意见:{索引视图":{组件:类别"}},解决: {myResolve: (someService) =>{返回 someService.getData();}}});

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

export const CategoryComponent = {绑定:{我的解决:<"},控制器:类别};

如果您现在在 constructor 和 $onInit 中注销 this.myResolve，您将看到如下内容:

constructor() {控制台日志(this.myResolve)；//<-- 未定义}$onInit() {控制台日志(this.myResolve)；//<-- 你的决心的结果}

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

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

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

With the release of AngularJS V1.7, the option to pre-assign bindings to has deprecated and removed:

Due to 38f8c9, directive bindings are no longer available in the constructor.

To migrate your code:

• If you specified $compileProvider.preAssignBindingsEnabled(true) you need to first migrate your code so that the flag can be flipped to false. The instructions on how to do that are available in the "Migrating from 1.5 to 1.6" guide. Afterwards, remove the $compileProvider.preAssignBindingsEnabled(true) statement.

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

Due to bcd0d4, pre-assigning bindings on controller instances is disabled by default. We strongly recommend migrating your applications to not rely on it as soon as possible.

Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.

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

What are the use cases when code has to be moved to the $onInit Life-Cycle Hook? When can we just leave the code in the controller construction function?

解决方案

Code has to be moved in the $onInit function, when it depends on bindings, because these bindings are not available within this in the constructor. They get assigned AFTER instantiation of the component class.

Example: You have a state definition like this:

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

You can bind the result of myResolve to your component like this:

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

If you now log out this.myResolve in the constructor and in $onInit you will see something like this:

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

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

So, your constructor should only contain constructing code like:

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

Every angular specific initialisation and binding or dependency usage should be in $onInit

这篇关于何时使用 AngularJS `$onInit` 生命周期钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！