Angular4学习笔记——生命周期钩子

最新推荐文章于 2024-01-16 17:05:21 发布

weixin_33913332

最新推荐文章于 2024-01-16 17:05:21 发布

阅读量156

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012180793

版权

接口和钩子

在介绍生命周期的相关概念之前，可以先复习一下TypeScript对于接口的概念。
在这里主要使用的是类接口及其实现：

interface ClockInterface {
    currentTime: Date;
}
// 该写法表示明确的强制一个Clock类符合ClockInterface接口
// 该接口中currentTime是一个Date类型的数据（并没有实际使用），创造Clock实例时需要传入参数h和m，都是数字类型。
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

在Angular中，也针对生命周期的不同时刻给予了一些接口，你可以在代码中强制自己的组件/指令在创建时实现这些接口。
而每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的。比如，OnInit接口的钩子方法叫做ngOnInit，Angular在创建组件后立刻调用它。

接口是可选的？

由于我们最终执行的代码是JavaScript,而在JS中是没有接口概念的，接口只是用来强化类的概念，经过编译之后接口消失了。
所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，Angular会找到并调用像ngOnInit()这样的钩子方法，有没有接口无所谓。
但是最好在写代码的时候不要省去接口，享受TypeScript所带来的强类型好处~~~

生命周期的顺序

指令和组件的实例有一个生命周期：新建、更新和销毁。
当Angular使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

ngOnChanges()

用处：当Angular设置数据绑定输入属性发生变化时响应。
时机：当被绑定的输入属性的值发生变化时调用，不过首次调用是会发生在ngOnInit()之前的。
ngOnChanges()方法获取了一个对象，它可以同时观测1个/多个绑定的属性值，它把每个发生变化的属性名都映射到了一个SimpleChange对象，该对象中有属性的当前值和前一个值。

// Angular定义SimpleChanges类构造函数三个参数分别为上一个值，当前值和是否第一次变化(firstChange: boolean)，这些changes都可以调用。
ngOnChanges(changes: SimpleChanges) {
  ... some code about changes here...
}

ngOnInit()

用处：在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
时机：在第一轮ngOnChanges()完成之后调用，只调用一次。
要明确一点就是，虽然接口中有一个constructor构造函数，但是在这里最好只对局部变量进行初始化之外什么都不做，通过ngOnInit()获取初始数据，而且是放在构造函数后面。

ngDoCheck()

用处：检测那些Angular自身无法捕获的变更
时机：在每个Angular变更检测周期中调用，ngOnChanges()和ngOnInit()之后。
谨慎使用，因为一些你意想不到的事情也会被视为变更了

ngAfterContentInit()和ngAfterContentChecked()

只适用于组件
用处：在外来内容被投影到组件中之后/投影组件内容的变更检测之后调用
时机：
ngAfterContentInit()--第一次ngDoCheck()之后调用，且只调用一次；
ngAfterContentChecked()--每次ngDoCheck()之后调用，如果需要调用ngAfterContentInit()，则在ngAfterContentInit()调用之后