该表按照执行顺序编写
编号 | 函数名 | 实现名 | 说明 |
---|---|---|---|
1 | constructor | constructor | 接收服务实例化对象 |
2 | ngOnChanges | OnChanges | 当输入属性值发生变化时执行 |
3 | ngOnInit | OnInit | 在首次接收到输入属性值后执行 |
4 | ngDoCheck | DoCheck | 主要用于调试,每次变化检测发生时调用 |
5 | ngAfterContentInit | AfterContentInit | 当内容投影初始渲染完成后调用 |
6 | ngAfterContentChecked | AfterContentChecked | 内容投影更新完成后执行 |
7 | ngAfterViewInit | AfterViewInit | 当组件视图渲染完成后调用 |
8 | ngAfterViewChecked | AfterViewChecked | 组件视图更新完成后执行 |
9 | ngOnDestroy | OnDestroy | 组件被销毁之前调用 |
该阶段生命周期函数只执行一次,数据更新时不再执行。
- 不是组件生命周期函数,是组件类的构造函数,但是他属于挂载阶段
- 建议只接收服务实例化对象,不要干其他的事
- angular实例化组件类时执行,可以用来接收angular注入的服务实例对象。
例: 创建一个服务“TestService”, 在组件中注入服务并在constructor中打印查看结果
TestService:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestService {
testTip = "test,来自服务的消息";
constructor() { }
}
export class OtherComponent implements OnInit{
constructor(
private TestService: TestService
) {
console.log("this.TestService--", this.TestService.testTip); // test,来自服务的消息
}
}
在首次接收到输入属性后执行,也用来做初始化任务执行
例: 创建一个子组件,在父组件中传递给子组件一个输入值,在子组件中打印查看结果。
在父组件中的子组件标签定义好属性
<app-son [sonName]="'王二小'">app-son>
子组件接收该属性值并打印
// 子组件类
export class SonComponent implements OnInit {
@Input() sonName: string = '';
constructor() { }
ngOnInit() {
console.log("sonName", this.sonName); // 王二小
}
}
- 输入属性发生变化时执行,初始设置时也会执行一次。响应组件输入值发生变化时出发。(顺序优先于ngOnInit)
- 不论有多少个输入属性同时变化,该钩子只会执行一次,变化的值会同时存储在参数中。(多个输入属性一起传递,钩子函数会同时处理)
- 参数的类型为SimpleChanges,子属性类型为SimpleChange。
- 对于基本数据类型来说,只要值发生改变就可以被该函数检测到。
- 对于引用数据类型来说,可以检测从一个对象变成另一个对象(整个对象重新赋值,引用地址发生了变化),但是检测不到同一个对象中属性值的变化(某个属性值被改变),但是不影响组件模板更新数据。(钩子函数捕捉不到改变,但是在组件模板中会变化)
例1:基本数据类型值变化
<app-son [sonName]="sonName">app-son>
<button (click)="changeName()">换个名字button>
// 父组件类
sonName: string = '王二小';
changeName() {
this.sonName = "李四";
}
在子组件类中接收该值,并在ngOnChanges方法中添加打印,查看该值的变化
// 子组件类
@Input() sonName: string;
ngOnChanges(changes: SimpleChanges): void {
console.log("changes", changes);
console.log("sonName", this.sonName);
}
例2:引用数据类型对象属性变化
<app-son [sonInfo]="sonInfo">app-son>
<button (click)="changeInfo()">换个信息button>
在父组件类中改变该对象的属性
// 父组件类
sonInfo = { name: "王二小", age: 18 };
changeInfo() {
this.sonInfo.name = "李四";
this.sonInfo.age = 3;
}
// 子组件类
@Input() sonInfo: Object;
ngOnChanges(changes: SimpleChanges): void {
console.log("changes", changes);
console.log("sonInfo", this.sonInfo);
}
在子组件模板中将该对象显示
<p>{{sonInfo | json}}p>
最终结果:
例3:引用数据类型引用地址变化
// 父组件组件类
sonInfo = { name: "王二小", age: 18 };
changeInfo() {
this.sonInfo = { name: "李四", age: 3 };
}
最终结果:
每次点击按钮,ngOnChanges都会检测到该对象的变化
在组件中,所有方法的无序的排列(未按照执行顺序排列)。因为每个方法有自己的特有的执行条件,并非按照先后顺序执行。
@Component({
selector: 'app-son',
templateUrl: './son.component.html',
styleUrls: ['./son.component.css']
})
export class SonComponent implements OnInit, AfterViewInit, AfterContentInit, OnChanges, DoCheck, AfterContentChecked, AfterViewChecked, OnDestroy {
constructor() {
console.log("constructor");
}
ngAfterViewChecked(): void {
console.log("ngAfterViewChecked");
}
ngOnDestroy(): void {
console.log("ngOnDestroy");
}
ngAfterContentChecked(): void {
console.log("ngAfterContentChecked");
}
ngDoCheck(): void {
console.log("ngDoCheck");
}
ngOnChanges(changes: SimpleChanges): void {
console.log("ngOnChanges");
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit");
}
ngOnInit() {
console.log("ngOnInit");
}
ngAfterViewInit(): void {
console.log("ngAfterViewInit");
}
}