Angular4学习笔记——生命周期钩子
接口和钩子在介绍生命周期的相关概念之前,可以先复习一下TypeScript对于接口的概念。 interface ClockInterface { currentTime: Date; } // 该写法表示明确的强制一个Clock类符合ClockInterface接口 // 该接口中currentTime是一个Date类型的数据(并没有实际使用),创造Clock实例时需要传入参数h和m,都是数字类型。 class Clock implements ClockInterface { currentTime: Date; constructor(h: number,m: number) { } } 在Angular中,也针对生命周期的不同时刻给予了一些接口,你可以在代码中强制自己的组件/指令在创建时实现这些接口。 接口是可选的?由于我们最终执行的代码是JavaScript,而在JS中是没有接口概念的,接口只是用来强化类的概念,经过编译之后接口消失了。 生命周期的顺序指令和组件的实例有一个生命周期:新建、更新和销毁。 ngOnChanges()用处:当Angular设置数据绑定输入属性发生变化时响应。 // Angular定义SimpleChanges类构造函数三个参数分别为上一个值,当前值和是否第一次变化(firstChange: boolean),这些changes都可以调用。 ngOnChanges(changes: SimpleChanges) { ... some code about changes here... } ngOnInit()用处:在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 ngDoCheck()用处:检测那些Angular自身无法捕获的变更 ngAfterContentInit()和ngAfterContentChecked()
ngAfterViewInit()和ngAfterViewChecked()
ngOnDestroy用处:反订阅可观察对象和分离事件处理器,以防内存泄漏 释放那些不会被垃圾收集器自动回收的各类资源的地方。取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |