angular生命周期钩子函数

pumpkin
794 阅读4分钟

一、生命周期钩子方法介绍：

1、constructor()

  1. constuctor是第一个被调用的方法，是angular类的构造函数，也就是得先构造组件类，才会有组件生命周期

    1. 在angular组件中这样使用

      export class testComponent {
  constructor() {
     ...someTS...
  }
}

2、ngOnChanges

  1. ngOnChanges是组件输入属性变化时也就是指@Input后面的属性值变化时，会调用，一旦输入性属性值变化就会调用，所以会被调用多次，第一次调用是在constructor后，ngOnInit前调用

  2. 输入属性如果是字符串、数字等这种值类型的数据，一旦输入属性变化，angular是可以检测到的，并自动调用ngOnChanges，但是如果输入属性是数组或对象这种引用类型的数据，angular的OnChanges是检测不到数组或对象的内部元素变化的，因为引用的地址没有发生改变，所以不会调用ngOnChanges方法，所以如果用ngOnChanges方法来传递父子组件间的值，且想要输入属性变化时更新子组件是达不到目的的，此时可以用@ViewChild来通过父组件向子组件传值

  3. 在angular组件中这样使用

    • 先引入

      import  { OnChanges }  from  'angular/core';

    • 在类中实现该接口

      export class testComponent implements OnChanges {
  ngOnChanges(changes) {
    console.log(changes)
  }
}

    • OnChanges钩子函数接收一个changes作为参数，该参数是SimpleChanges类型，里面以字典的形式存储了在本次调用该钩子函数时，所有变化了的输入属性，并包含每个变化了的属性的previousValue,currentValue,firstChange,具体可以打印到控制台看一下

3、ngOnInit

  1. ngOnInit是组件初始化时调用的方法，只调用一次

  2. 在angular组件中这样使用

    • 引入

      import  { OnInit }  from  'angular/core';

    • 在类中实现该接口

      export class testComponent implements OnInit {
  ngOnInit() {}
}

4、ngDoCheck

  1. ngDoCheck是组件在进行脏值检测时，调用的方法，组件一旦有任何细微的变化都会调用该方法，甚至鼠标在页面上移动也会检测到变化，会调用ngDoCheck，即会调用无数次，所以在ngDoCheck中调用的方法不要太复杂，并且要设置一定的条件才调用，否则会造成页面卡顿
  2. OnChanges和DoCheck都是值进行变化时调用的方法，但是OnChanges是只有输入属性变化时才会调用，调用频率比DoCheck低，angular中要求一个类不能同时实现OnChanges和DoCheck接口
  1. 在angular中这样使用

5、ngAfterContentInit

  1. ngAfterContentInit方法是组件投影内容初始化时调用的方法

  2. 什么叫投影内容：就是在父组件引用自组件时，子组件标签内部还可以嵌套其他html标签，但是只这样写，自组件标签中的内容是不会显示的，想要让这些html标签渲染显示的前提是在子组件html文件的下边加一行<ng-content></ng-content>，加的这一行就代表可以在父组件引用子组件时，在子组件标签内再添加内容

    //parent.html
  <child>
    <div>我是投影内容</div>
  </child>
  
//child.html
  <div>我是子组件内容</div>
  <ng-content></ng-content> //加上该标签，父组件中的投影内容才会显示

6、ngAgterContentChecked

  1. ngAfterContentChecked方法是投影内容进行脏值检测时调用的方法，也会调用很多次

7、ngAfterViewInit

  1. ngAfterViewInit方法是子组件视图初始化时调用的方法，只调用一次

8、ngAfterViewChecked

  1. ngAfterViewChecked方法是进行子组件脏值检测时调用的方法，会调用多次

9、ngOnDestroy

  1. ngOnDestroy方法是当组件销毁时调用
  2. 组件销毁：如页面跳转，或控制组件是否渲染显示的*ngIf的值由true变为false时，组件就会销毁，就会调用该方法

10、生命周期钩子函数使用方法

  1. 所有生命周期钩子方法的使用，都要先引入，再实现相应接口，需要哪个就引入和实现哪个接口，但是constructor方法可以直接在类中是用，因为constructor方法不是生命周期钩子方法，虽然他也是自动调用的
import  { OnChanges, Oninit, DoCheck }  from  'angular/core';
export class testComponent implements onChanges, OnInit {
  constructor() {
     ...someTS...
  }
  
  ngOnChanges() {}
     
  ngOnInit() {}
}
avatar
文章
阅读
粉丝