angular8生命周期,angular周期函数
在使用angular进行开发时，不可避免的会触及到生命周期。下面这篇文章将带你谈谈Angular中的生命周期。希望对你有帮助！
接触过react和vue开发的读者应该对生命周期的概念比较熟悉。在有棱角的发展过程中，我们无法避免。【相关教程推荐：《angular教程》】
从开始构建到销毁，组件会经历一系列阶段。这是一个生命周期，这些阶段对应于应用程序提供的生命周期挂钩。
那么，在angular中，这些钩子是什么？了解它们对于你应该在哪里写你的程序是非常重要的。
在angular中，生命周期的执行顺序如下：
-constructor[常用，不是钩子函数，但是很重要]
-ngOnChanges[普通]
-ngOnInit[通用]
-恩多切克
- ngAfterContentInit
- ngAfterContentChecked
-ngafterviewit[常用]
- ngAfterViewChecked
-ngOnDestroy【常用】为了解释和验证，我们使用angular-cli生成一个演示项目。
constructor
当es6中的类初始化对象时，会立即调用构造函数。
类别人员{
构造者(姓名){
console.log(被调用)
this.name=name
}
}
让吉米=新人(吉米)；Becalled Angular本身的组件导出一个类。当这个组件被更新时，它将获得构造函数中的预设值。
ngOnChanges
当我们有外部参数变化时，我们会执行ngOnChanges，也就是说，当组件中@Input绑定的属性值发生变化时，就会调用它。
简单来说，当父组件绑定子组件中的元素时，就会触发这个钩子函数，可以多次启动。这总是在下面的ngOnInit中介绍。
ngOnInit
调用此方法时，组件已成功初始化。在第一个ngOnChanges()完成后调用，并且只调用一次。
//app.component.ts
导出类AppComponent实现OnInit，OnChanges {
构造函数(){
console.log(1。构造者’)
}
ngOnChanges() {
console.log(2。ngOnChanges’)
}
ngOnInit() {
console.log(3。ngOnInit’)
}
}打印的信息如下：
呃？为什么没有在ngOnChanges中打印钩子函数信息？
如上所述，当需要触发条件@Input的属性值时。我们来修改一下：
！app.component.html
差异
应用演示/应用演示
/div//app.component.ts
//在AppComponent类中添加属性
公共计数：number=0；demo.component.html
H3 count:{ { count } }/H3//demo . component . ts
导出类DemoComponent实现OnInit，OnChanges {
@Input()
公开计数：数字；
构造函数(){
console.log(1。演示构造器’)
}
ngOnChanges() {
console.log(2。demo ngOnChanges’)
}
ngOnInit() {
console.log(3。demo ngOnInit’)
}
}
当值通过@Input传递给子组件demo时，demo组件中的ngOnChanges将被触发。
当@Input传递的属性发生变化时，可以多次触发演示组件中的ngOnChanges钩子函数。
！app.component.html
差异
应用程序演示[计数]=计数/应用程序演示
button (click)=parentDemo()父按钮/按钮
/div//app.component.ts
parentDemo() {
this.count
}
ngDoCheck
当检测到变化时，触发挂钩功能。
每次执行更改检测时，在ngOnChanges之后立即调用该钩子函数，第一次执行更改检测时，在ngOnInit之后调用该钩子函数。
//demo.component.ts
ngDoCheck() {
console.log(4。演示ngDoCheck’)
}
这个钩子函数调用频繁，成本较高，要谨慎使用。
ngAfterContentInit
当外部内容被投影到内部组件时，ngAfterContentInit在第一次调用ngDoCheck后仅调用一次。
//demo.component.ts
ngAfterContentInit() {
console.log(5。demo ngAfterContentInit’)；
}
ngAfterContentChecked
ngAfterContentChecked钩子函数在每次ngDoCheck后被调用。
//demo.component.ts
ngAfterContentChecked() {
console.log(5 .demo ngAfterContentChecked’)；
}
ngAfterViewInit
视图初始化完成调用此钩子函数。在第一次ngAfterContentChecked之后调用，只调用一次。
这个时候，获取页面的数字正射影像图节点比较合理
//演示。组件。分时（同timesharing）
ngAfterViewInit
console.log(7 .demo ngafterviewit’)；
}
ngAfterViewChecked
视图检测完成调用。在ngAfterViewinit后调用，和在每次ngAfterContentChecked之后调用，也就是在每次ngDoCheck之后调用。
//demo.component.ts
ngAfterViewChecked() {
console.log(8 .ngAfterViewChecked’)
}
ngOnDestroy
组件被销毁时候进行的操作。
！app.component.html
app-demo[count]= count * ngIf= show demo组件/app-demo
按钮(点击)=hideDemo()隐藏演示组件/button//app.component.ts
公共showdemo组件：boolean=true
hideDemo() {
this.showDemoComponent=false
}//demo.component.ts
ngOnDestroy() {
console.log(9 .demo ngOnDestroy’)
}
【完】
更多编程相关知识，请访问：编程入门！以上就是一文聊聊有角的中的生命周期的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。