浅谈对Angular中的生命周期钩子的理解

本文介绍了Angular中的生命周期钩子的理解，分享给大家，希望对大家有所帮助

什么是生命周期钩子

简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块 @angular/core 暴露出来,赋予了我们在它们发生时采取行动的能力.

有哪些生命周期钩子

Angular中从一个组件的创建到销毁一个有八个生命周期钩子它们,按照先后顺序.它们分别是:

ngOnChanges() ngOnInit() ngDoCheck() ngAfterContentInit() ngAfterContentChecked() ngAfterViewInit() ngAfterViewChecked() ngOnDestroy()

其中: ngOnInit() 、 ngAfterContentInit() 、 ngAfterViewInit() 和 ngOnDestroy() 在一个组件的生命周期中只会被调用一次,其它的都有可能会被多次调用.下面,就让我们来详细解列一下这些生命周期钩子.

ngOnChanges()

ngOnChanges() 生命周期的调用与一个组件中的输入属性有关.

当在一个组件中使用 @Input() 定义了一个输入属性时.只要这个输入属性的值发生了改变.就会触发 ngOnChanges() 生命周期钩子.这个生命周期钩子被调用时会传入一个 SimpleChanges 对象,这个对象中包含了输入属性当前值和上一值.

@Input()public name: string;ngOnChanges(changes: SimpleChanges): void { console.log(changes); // name:SimpleChange {previousValue: "a", currentValue: "ab", firstChange: false}}

上面是我定义了一个输入属性 name 并将从 a 它改为 ab 之后的打印结果,可能你还注意到了打印的结果中还有一个 firstChange 属性.它是一个Booleans,表明你是否是第一次改变.

同时,还有一点需要注意:你的输入属性定义为你引用类型和基本类型的时候其表现结果是不同的.当你的输入属性是基本类型时.你的每一次改变都会触发 ngOnChanges() 生命周期钩子,而当你的输入属性是引用类型时,你改变你引用类型 当中 的属性时,并不会触发 ngOnChanges() 生命周期钩子.只有当你将你引用类型数据的指针指向另一块内存地址的时候才会触发 ngOnChanges() 生命周期钩子.

ngOnInit()

ngOnInit() 是一个组件的生命周期中一定存在的一个钩子.它在一个组件被初始化的时候被调用.在这个期间,你可以执行一些相应的数据绑定操作.

ngDoCheck()