何时使用 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 tofalse
. 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.
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屋!