$onDestroy() is a hook that is called when its containing scope is destroyed. We can use this hook to release external resources, watches and event handlers.
这个hook比较简单,就是用来释放和清理资源的。
function MyCmpController($element) {
var clickHandler = function () {
// do something
};
this.$onInit = function () {
$element.on('click', clickHandler);
};
this.$onDestroy = function () {
$element.off('click', clickHandler);
};
}
之前两篇博文,我试图将单向数据绑定的‘<’和'&'两种类型的数据绑定讲解清楚,但我发现,如果不理解Lifecycle Hooks, 还是很难搞清楚的,而且使得读者很容易绕进去的。所以本篇主要来探讨一下Lifecycle Hooks.
Lifecycle Hooks
如何理解Lifecycle Hooks,
在Angular 2 alpha release中首次提出了这个概念,有人说是受到了webcomponent中的一篇文章的启发(Introduction to Custom Elements). 那么问题来了,使用Angular1.x的如何升级进化到Angular2呢,为了解决这个问题,所以在Angular1.5.3也引入了Lifecycle-hooks。
Lifecycle Hooks在Angular组件的控制器中主要对外暴露了四个函数,分别为$onInit、$onChanges $onDestroy $postLink.
$onInit
主要作用是为component提供了一个初始化的地方, 我们通常是通过bindings: {}对象把我们需要的数据传递到组件中, 当bindings对象所有数据传递到组件内部后,$onInit自然就被调用了。
需要注意的是:
$onChanges
在单向数据绑定中(one way data-binding),即'<', 父组件向子组件传递的数据发生变化时, $onChanges会自动触发。
This new hook is similar to ng2’s ngOnChanges. It is called whenever one way bindings are updated, with a hash containing the changes objects.
在此之前,我们一般用$watch, $watchCollection去监控数据的变化
接下来,我们可以深入的理解一下这两篇文章了:
$onDestroy
$onDestroy() is a hook that is called when its containing scope is destroyed. We can use this hook to release external resources, watches and event handlers.
这个hook比较简单,就是用来释放和清理资源的。
$postLink
关于$postLink, 这里先占个位,后面抽时间来讲解。
-- To be continued.
References
EXPLORING ANGULAR 1.5: LIFECYCLE HOOKS
Lifecycle hooks in Angular 1.5
Angular 1.5 new component lifecycle hooks