angular中的生命周期

生命周期

1、Angular每个组件都存在一个生命周期，从创建，变更到销毁。Angular提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力，掌握生命周期，可以让我们更好的开发Angular应用
2、每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，比如OnInit接口的钩子方法叫做ngOnInit.
3、没有指令或者组件会实现所有这些接口，并且有些钩子只对组件有意义。只有在指令/组件中定义过的那些钩子方法才会被Angular调用。

基于指令与组件的区别来分类:

1、指令与组件共有的钩子：
ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy
2、组件特有的钩子
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

Angular 2 指令生命周期钩子的作用及调用顺序

0、constructor 构造函数这里是唯一的依赖注入的地方，它主要用于依赖注入或执行简单的数据初始化操作。
1、ngOnChanges - 当数据绑定输入属性的值发生变化时调用
　　2、ngOnInit - 在第一次 ngOnChanges 后调用
　　3、ngDoCheck - 自定义的方法，用于检测和处理值的改变
　　4、ngAfterContentInit - 在组件内容初始化之后调用
　　5、ngAfterContentChecked - 组件每次检查内容时调用
　　6、ngAfterViewInit - 组件相应的视图初始化之后调用
　　7、ngAfterViewChecked - 组件每次检查视图时调用
　　8、ngOnDestroy - 指令销毁前调用

export class HomeComponent implements OnInit, OnChanges{
  public canvasImg = ''
  public count = 0;
  constructor() {
    console.log(html2canvas)
    console.log(++this.count+ '--constructor')
   }
  ngOnChanges(change: SimpleChanges ){
    console.log(111) 
    console.log(change)
    console.log(++this.count+ '--ngOnChanges')

  }
  ngOnInit(): void {
  //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
  //Add 'implements OnInit' to the class.
  console.log(++this.count+ '--ngOnInit')
  
  }
  ngDoCheck(): void {
   //Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
   //Add 'implements DoCheck' to the class.
   console.log(++this.count+ '--ngDoCheck')
   
 }
  ngOnDestroy(): void {
  //Called once, before the instance is destroyed.
  //Add 'implements OnDestroy' to the class.
  console.log(++this.count+ '--ngOnDestroy')
  
  }
  ngAfterContentInit(): void {
    //Called after ngOnInit when the component's or directive's content has been initialized.
    //Add 'implements AfterContentInit' to the class.
    console.log(++this.count+ '--ngAfterContentInit')
    
  }
  ngAfterContentChecked(): void {
    //Called after every check of the component's or directive's content.
    //Add 'implements AfterContentChecked' to the class.
    console.log(++this.count+ '--ngAfterContentChecked')
    
  }
  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    console.log(++this.count+ '--ngAfterViewInit')
    
  }

  ngAfterViewChecked(): void {
    //Called after every check of the component's view. Applies to components only.
    //Add 'implements AfterViewChecked' to the class.
    console.log(++this.count+ '--ngAfterViewChecked')
    
  }

image.png

tips：
ngOnchanges 的调用是发生在有可变值传入的时候会在oninit之前调用 每次传入的值发生改变的时候也会调用。
@input() value:string; 绑定属性[value]="123" 这样的类型不会触发ngOnchanges
[value]="对象" 会触发ngonchanges 在SimpleChanges 对象中保存着当前的值

image.png