知识改变世界
生活可以更简单
注册 登录
***文章***

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

作者:隔壁老王 类型:转载 时间:2017-08-03

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

什么是生命周期钩子

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

有哪些生命周期钩子

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

  1. ngOnChanges()
  2. ngOnInit()
  3. ngDoCheck()
  4. ngAfterContentInit()
  5. ngAfterContentChecked()
  6. ngAfterViewInit()
  7. ngAfterViewChecked()
  8. ngOnDestroy()

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

ngOnChanges()

  • 当Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象
  • 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。

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

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

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

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

  1. // 父组件
    <app-child>
     <p>我是父组件向子组件的投影内容</>
    </app-child>
    
    
    // 子组件 ChildComponent
    <div>
     //接受父组件的投影内容
     <ng-content></ng-content>
    </div>
    
    

ngAfterContentChecked()

希望本文所述对大家程序设计有所帮助。

***其他版块***

本站为编程爱好者提供计算机电子书免费资源下载,定期更新!

***其他***

更多内容,敬请期待!谢谢!!!