分享更有价值
被信任是一种快乐

Angular生命周期执行的顺序是什么

文章页正文上

这篇文章主要介绍“Angular生命周期执行的顺序是什么”,在日常操作中,相信很多人在Angular生命周期执行的顺序是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular生命周期执行的顺序是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 接触过 reactvue 开发的读者应该对生命周期这个概念不陌生。我们在使用 angular 开发的过程中,是避免不了的。组件从开始建立到销毁的过程中,会经历过一系列的阶段。这就是一个生命周期,这些阶段对应着应用提供的 lifecycle hooks。那么,在 angular 中,这些 hooks 都有哪些呢?了解它们,对你编写程序应该在哪里编写,很重要。angular 中,生命周期执行的顺序如下:

-constructor【常用,不算钩子函数,但是很重要】
-ngOnChanges【常用】
-ngOnInit【常用】
-ngDoCheck
-ngAfterContentInit
-ngAfterContentChecked
-ngAfterViewInit【常用】
-ngAfterViewChecked
-ngOnDestroy【常用】

为了解说和验证,我们用 angular-cli 生成一个 demo 项目。在 es6 中的 class 初始化对象的时候,constructor 会立即被调用。

classPerson{
constructor(name){
console.log('becalled')
this.name=name;
}
}

letjimmy=newPerson('jimmy');//becalled

angular 的组件本身就是导出一个类。当这个组件被 new 起来的时候,会获取 constructor 中的预设的值。当我们有外部参数更改的时候,我们就会执行 ngOnChanges,也就是说组件中有 @Input 所绑定的属性值发生改变的时候调用。简单说,父组件绑定子组件中的元素,会触发这个钩子函数,可以多次出发。这在下面的 ngOnInit 总会介绍。这个方法调用的时候,说明组件已经初始化成功。在第一次 ngOnChanges() 完成之后调用,且只调用一次。

//app.component.ts
exportclassAppComponentimplementsOnInit,OnChanges{

constructor(){
console.log('1.constructor')
}

ngOnChanges(){
console.log('2.ngOnChanges')
}

ngOnInit(){
console.log('3.ngOnInit')
}
}

打印的信息如下:咦?怎么没有打印 ngOnChanges 中的钩子函数信息呢?上面已经说过了,需要触发条件 @Input 的属性值改变的时候。我们来修改一下:

//app.component.ts
//AppComponent类中添加属性
publiccount:number=0;

count:{{count}}

//demo.component.ts
exportclassDemoComponentimplementsOnInit,OnChanges{

@Input()
publiccount:number;

constructor(){
console.log('1.democonstructor')
}

ngOnChanges(){
console.log('2.demongOnChanges')
}

ngOnInit(){
console.log('3.demongOnInit')
}

}

当通过 @Input 将值传递给子组件 demo 的时候,就会触发 demo 组件中的 ngOnChanges。当 @Input 传递的属性发生改变的时候,可以多次触发 demo 组件中的 ngOnChanges 钩子函数。

//app.component.ts
parentDemo(){
this.count++;
}

当发生变化检测的时候,触发该钩子函数。这个钩子函数,紧跟在每次执行变更检测时候 ngOnChanges 和首次执行执行变更检测时 ngOnInit 后面调用。

//demo.component.ts

ngDoCheck(){
console.log('4.demongDoCheck')
}

这个钩子函数调用得比较频繁,使用成本比较高,谨慎使用。一般使用 ngOnChanges 来检测变动,而不是 ngDoCheck当把外部的内容投影到内部组件,第一次调用 ngDoCheck 之后调用 ngAfterContentInit,而且只调用一次。

//demo.component.ts

ngAfterContentInit(){
console.log('5.demongAfterContentInit');
}

ngAfterContentChecked 钩子函数在每次 ngDoCheck 之后调用.

//demo.component.ts

ngAfterContentChecked(){
console.log('5.demongAfterContentChecked');
}

视图初始化完成调用此钩子函数。在第一次 ngAfterContentChecked 之后调用,只调用一次。这个时候,获取页面的 DOM 节点比较合理

//demo.compoent.ts

ngAfterViewInit(){
console.log('7.demongAfterViewInit');
}

视图检测完成调用。在 ngAfterViewinit 后调用,和在每次 ngAfterContentChecked 之后调用,也就是在每次 ngDoCheck 之后调用。

//demo.component.ts

ngAfterViewChecked(){
console.log('8.ngAfterViewChecked')
}

组件被销毁时候进行的操作。在这个钩子函数中,我们可以取消订阅,取消定时操作等等。

//app.component.ts
publicshowDemoComponent:boolean=true;

免费云主机、域名hideDemo(){
this.showDemoComponent=false
}

//demo.component.ts
ngOnDestroy(){
console.log('9.demongOnDestroy')
}

PS: 不知道读者有没有发现,调用一次的钩子函数都比较常用~到此,关于“Angular生命周期执行的顺序是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: jquery如何判断是否包含某属性

本文小编为大家详细介绍“jquery如何判断是否包含某属性”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何判断是否包含某属性”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 实现步骤:1、使用jquery选择器获取指定…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册