Angular8 实战(十四)组件生命周期(2)

本章接着说组件的生命周期~

ngAfterContentInit

组件内容初始化钩子函数,在组件使用<ng-content>将外部内容嵌入到组件视图后就会调用ngAfterContentInit,它在第一次ngDoCheck执行后调用,且只执行一次。
可以在该钩子函数中改变视图内容。例如:变量初始化
示例如下:

13-6.gif

ngAfterContentChecked

在组件使用了<ng-content>自定义内容的情况下,angular在这些外部内容嵌入到组件视图后或者每次变换监测的时候都会调用ngAfterContentChecked。
实际上,它也属于脏值检测,只不过是<ng-content>内容脏值检测完成后调用。同样也可以多次调用。

13-7.gif

ngAfterViewInit

组件的视图初始化,指的是组件及子组件和其内容全部初始化完成。初始化完组件视图及其子视图之后调用。


13-8.gif

ngAfterViewChecked

类似的,它是组件视图的脏值检测。组件视图的脏值检测同样是angular框架来完成的,也是多次调用的。

此时可以看一下,除了组件的销毁,组件的其它生命周期函数都已经列出来了。


13-9.png

除了ngOnChanges和脏值检测函数可多次调用,其它函数都是一次性调用的。脏值检测后期会细讲。

ngOnDestroy

组件销毁的时候调用这个钩子函数。在父组件中调用子组件时定义一个组件销毁条件,如果scrollabelTabBackgroundColor为红色那么显示,不是红色,那么将被销毁掉。示例如下:


13-10.gif

另外,ngOnDestroy是需要做一些清理工作的,如果你使用了等待事件,如setTime,setInterval或者setTimeout等,需要在ngOnDestroy中清理,否则会导致内存泄漏。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容