Angular—生命周期函数

目录

一、概述

二、详解

三、实例

---

一、概述

生命周期函数也叫生命周期钩子，是组件在创建、更新、销毁时会触发的一系列方法。注意，Angular指令中也有生命周期函数，暂时忽略。

二、详解

Angular组件中主要有八个生命周期函数，如下所示。

constructor

使用简单的值对局部变量进行初始化。

ngOnChanges()

主要用在父子组件传值。父组件给子组件传值的时候，以及父组件改变传值数据的时候，会触发该函数。

ngOnInit()，重点掌握

在Angular第一次显示数据绑定和设置组件/指令的输入属性后，初始化组件或指令。在第一轮ngOnChanges()完成之后调用，只调用一次。使用该构造函数有两个原因。其一在构造函数之后马上执行复杂的初始化逻辑。其二在 Angular 设置完输入属性之后，对该组件进行准备。

ngOnInit主要用来做请求数据。

ngDoCheck()

了解即可，该函数在ngOnInt函数之后触发。ngDoCheck()中可以做一些自定义的操作，比如查看数据是否改变。

ngAfterContentInit() 

组件挂载。组件渲染完成后触发。第一次ngDoCheck()之后调用，只调用一次。 

ngAfterContentChecked()

组件初始化渲染完成后，做一些自定义操作。ngAfterContentInit() 和每次ngDoCheck()之后调用。

ngAfterViewInit()，重点掌握

视图挂载。组件视图及子视图初始化完成后调用，该函数一般进行dom操作。第一次ngAfterContentChecked()之后调用，只调用一次。 

ngAfterViewChecked()

在ngAfterViewInit函数之后做一些自定义的操作。ngAfterViewInit()和每次ngAfterContentChecked() 之后调用。 

ngOnDestroy()，重点掌握

组件销毁时触发。

三、实例

构造函数执行顺序

当页面加载时，生命周期函数触发顺序如下所示。

export class LifecycleComponent{
    constructor(){
        console.log("00,除了使用简单的值对局部变量进行初始化之外,什么都不应该做");
    }
    ngOnChanges(){
        console.log("01,当被绑定的输入属性值发生变化时调用(父子组件传值时触发));
    }
    ngOnInit(){
        console.log("02,请求数据一般放在这里面");    
    }
    ngDoCheck(){
        //写一些自定义操作
        console.log("03,检测,并在发生Angular无法或不愿意自己检测的变化时作出反应);
        if(this.userinfo!==this.oldUserinfo){
            console.log(`你从${this.oldUserinfo}改成${this.userinfo}`);
            this.oldUserinfo = this.userinfo;
        }else{
            console.log("数据没有变化");          
        }
    }
    ngAfterContentInit(){
        console.log("04,当把内容投影进组件之后调用);
    }
    ngAfterContentChecked(){
        console.log("05,每次完成被投影组件内容的变更检测之后调用");
    }
    ngAfterViewInit(){
        console.log("06,初始化完组件视图及其子视图后调用(dom操作放在这里面)");
    }
    ngAfterViewChecked(){
        console.log("07,每次做完组件视图及其子视图的变更监测之后调用");
    }
    ngOnDestroy(){
        console.log("08,组件销毁时调用");
    }
    
}

绑定数据改变时触发的生命周期函数

<h2>{{msg}}</h2>
<button (click)="changeMsg()">改变msg的值</button>

changeMsg(){
      this.msg="数据改变了";
}

// 数据改变后触发如下三个生命周期函数
ngDoCheck(){ }
ngAfterContentChecked(){ }
ngAfterViewChecked(){ }

带有check的生命周期函数，只要数据改变就会触发，比如input输入框输入数据时。带有Init的生命周期函数只会触发一次。