一、挂载阶段

挂载阶段的生命周期函数只在挂载阶段执行一次，数据更新时不再执行。
用命令创建组件:ng g c child
用命令创建服务:ng g s test

1.constructor

Angular在实例化组件类时执行，可以用来接收Angular注入的服务实例对象。

export class ChildComponent{
    constructor(private test:TestService){
        console.log(this.test);//'test'
    }
}

2.ngOnInit

在首次接收到输入属性值后执行，在此处可以执行请求操作。

<app-child name="张三"></app-child>

export class ChildComponent implements OnInit{
    @Input("name") name:string=""
    ngOnInit(){
        console.log(this.name) //'张三'
    }
}

3.ngAfterComtentInit

当内容投影初始渲染完成后调用。

<app-child>
    <div #box>Hello Angular</div>
</app-child>

export class ChildComponent implements AfterContentInit{
    @ContentChild("box") box:ElementRef<HTMLDivElement>|undefined
    ngAfterContentInit(){
        console.log(this.box)//<div>Hello Angular</div>
    }
}

4.ngAfterViewInit

当组件视图渲染完成后调用。

<!--app-child组件模板-->
<p #p>app-child works</p>

export class ChildComponent implements AfterViewInit{
    @ViewChild("p") p:ElementRef<HTMLParagraphElement> | undefined
    ngAfterViewInit(){
        console.log(this.p) //<p>app-child</p>
    }

}

二、更新阶段

1.ngOnChanges

1)当输入属性值发生变化时执行，初始设置时也会执行一次，顺序优于ngOnInit
2)不论多少输入属性同时变化 ，钩子函数只会执行一次，变化的值会同时存储在参数中
3)参数类型为SimpleChanges,子属性类型为SimpleChange
4)对于基本数据类型来说，只要值发生变化就可以被检测到
5)对于引用数据类型来说，可以检测从一个对象变成另一个对象，但是检测不到同一个对象中属性值的变化 ，但是不影响组件模板更新数据。

基本数据类型值变化

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">change</button>

export class AppComponent{
    name:string="张三";
    age:number=20
    change(){
        this.name="李四"
        this.age=30
    }
}

export class ChildComponent implements OnChanges{
    @Input("name") name:string=''
    @Input("age") age:number=0
    ngOnChange(changes:SimpleChanges){
        console.log(changes)
        console.log("基本数据类型值变化可以被检测到")
    }
}

引用数据类型变化

<app-child [person]="person"></app-child>
<button (click)="change()">change</button>

export class AppComponent{
 person={name:"张三",age:20}
 change(){
    this.person={name:"李四",age:30}
 }
}

export class ChildComponent implement OnChanges{
    @Input("person") person={name:"",age:0}
    ngOnChanges(changes:SimpleChanges){
        console.log("基本数据类型值变化可以被检测到")
    }
}

1)ngDoCheck:主要用于调试，只要输入属性发生变化，不论是基本数据类型还是引用数据类型还是引用数据类型中的属性变化 ，都会执行。(执行频率太高，代码太大)
2)ngAfterContentChecked:内容投影更新完成后执行。
3)ngAfterViewChecked:组件视图更新完成后执行。

三、卸载阶段

1.ngOnDestory

当组件被销毁之前调用，用于清理操作。一般是换页面时。

export class HomeComponent implements OnDestory{
    ngOnDestory(){
        console.log("组件被卸载")
    }
}