Angular的生命周期函数

Angular的生命周期函数

中文官网地址对于生命周期的说明

生命周期函数	触发时机
ngOnChanges	设置或重新设置数据绑定的输入属性时响应
ngOnInit （只执行一次）	第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件
ngDoCheck	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应
ngAfterContentInit（只执行一次）	当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用
ngAfterContentChecked	每当 Angular 检查完被投影到组件或指令中的内容之后调用
ngAfterViewInit（只执行一次）	当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用
ngAfterViewChecked	每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用
ngOnDestory	每当 Angular 每次销毁指令/组件之前调用并清扫

constructor() {
    console.log('constructor 构造函数执行')
}

title:number = 0
ngOnChanges():void {
    console.log('ngOnChanges 当 Angular 设置或重新设置数据绑定的输入属性时响应')
}

ngOnInit(): void {
	setInterval(()=> {
	     this.title += 1000
	     console.log(this.title)
	},1000)
    console.log('ngOnInit 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件')
}

ngDoCheck(): void {
    console.log('ngDoCheck 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应')
}

ngAfterContentInit():void {
    console.log('ngAfterContentInit 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用')
}

ngAfterContentChecked() :void {
    console.log('ngAfterContentChecked 每当 Angular 检查完被投影到组件或指令中的内容之后调用')
}

ngAfterViewInit():void {
    console.log('ngAfterViewInit 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用')
}

ngAfterViewChecked():void {
    console.log('ngAfterViewChecked 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用')
}

ngOnDestory(): void {
    console.log('ngOnDestory 每当 Angular 每次销毁指令/组件之前调用并清扫')
}