angular 学习记录（七）

一、生命周期钩子

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。
生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。
当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。
当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。

二、生命周期钩子的作用及调用顺序：

image.png

ngOnChanges - 当数据绑定输入属性的值发生变化时调用

ngOnInit - 在第一次 ngOnChanges 后调用

ngDoCheck - 自定义的方法，用于检测和处理值的改变

ngAfterContentInit - 在组件内容初始化之后调用

ngAfterContentChecked - 组件每次检查内容时调用

ngAfterViewInit - 组件相应的视图初始化之后调用

ngAfterViewChecked - 组件每次检查视图时调用

ngOnDestroy - 指令销毁前调用

当你的应用通过调用构造函数来实例化一个组件或指令时，Angular 就会调用那个在该实例生命周期的适当位置实现了的那些钩子方法。

Angular 会按以下顺序执行钩子方法。你可以用它来执行以下类型的操作。

image.png
image.png

三、详解：

1.constructor-掌握

constructor，来初始化类。Angular中的组件就是基于class类实现的，在Angular中，constructor用于注入依赖。组件的构造函数会在所有的生命周期钩子之前被调用，它主要用于依赖注入或执行简单的数据初始化操作。

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent {
  name: string = '';

  constructor(public elementRef: ElementRef) {//使用构造注入的方式注入依赖对象
    // 执行初始化操作
    this.name = 'Semlinker'; 
  }
}

2.ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。可以请求数据

使用 ngOnInit() 有两个原因:

在构造函数之后马上执行复杂的初始化逻辑
在 Angular 设置完输入属性之后，对该组件进行准备。有经验的开发者会认同组件的构建应该很便宜和安全

  import { Component, Input, OnInit } from '@angular/core';

  @Component({
      selector: 'exe-child',
      template: `
      <p>父组件的名称：{{pname}} </p>
      `
  })
  export class ChildComponent implements OnInit {
      @Input()
      pname: string; // 父组件的名称

      constructor() {
          console.log('ChildComponent constructor', this.pname); 
          // Output：undefined
      }

      ngOnInit() {
          console.log('ChildComponent ngOnInit', this.pname); 
          // output: 输入的pname值
      }
  }

....