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

fizz 发布于2019-08-21 17:48 / 2170人阅读

摘要：所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，会找到并调用像这样的钩子方法，有没有接口无所谓。当使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法用处当设置数据绑定输入属性发生变化时响应。

接口和钩子

在介绍生命周期的相关概念之前，可以先复习一下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()调用之后

ngAfterViewInit()和ngAfterViewChecked()

只适用于组件
用处：初始化完/检测变更完组件视图及其子视图之后调用。
时机：跟相应的content钩子类似，在对应的content钩子后面。

ngOnDestroy

用处：反订阅可观察对象和分离事件处理器，以防内存泄漏
时机：销毁指令/组件之前调用并清扫

释放那些不会被垃圾收集器自动回收的各类资源的地方。取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90042.html

angular4学习记录 -- 组件通讯、生命周期

摘要：每完成被投影组件内容发生变化时调用。每次做完组件视图和子组件视图的变更检测之后调用。组件销毁时调用，主要用于内存回收。策略策略是当组件的输入属性发生变更时才会检查当前组件及其子组件。 angular4 组件通讯、生命周期主要通讯形式父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件父组件通过局部变量获取子组件的引用父组件使用@ViewChild获取子组件的引用两个不...

shadajin 2019-08-21 16:45 评论0 收藏0
Angular4学习笔记——组件之间的交互

摘要：具体思路子组件暴露一个属性，当事件发生时，子组件利用该属性向上弹射事件。父组件绑定到这个事件属性，并在事件发生时作出回应。这个组件子树之外的组件将无法访问该服务或者与它们通讯。父子组件通过各自的构造函数注入该服务。通过输入型绑定把数据从父组件传到子组件 Angular对于父组件 => 子组件的数据通信做法和Vue很相似。 // 父组件html模板 // 子组件接收数据 i...

Guakin_Huang 2019-08-21 17:48 评论0 收藏0
Vue2.5笔记：Vue的实例与生命周期

摘要：总结这边文章主要是介绍了下的实例与生命周期，在实例化的过程中我们可以添加许多可选对象，比如生命周期钩子函数等，让实例产生我们想要的行为。理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设...

Ashin 2019-08-23 12:10 评论0 收藏0
vue入门笔记体系（二）vue生命周期

摘要：此时还未有选项钩子函数和间的生命周期完成后，会有一个判断过程，判断对象是否有选项。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。和钩子函数间的生命周期钩子函数在实例销毁之前调用。 vue生命周期这是vue生命周期的图示具体内容：showImg(https://segmentfault.com/img/bV4xju?w=1200&...

scola666 2019-08-23 10:30 评论0 收藏0
Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0