Angular4学习笔记（九）- 生命周期钩子简介

- 日理万妓 2022-05-13 06:20 187阅读 0赞

原文出处：[https://blog.csdn.net/Young4Dream/article/details/78453357][https_blog.csdn.net_Young4Dream_article_details_78453357]  
具体用法可参考：[Angular4-在线竞拍应用-组件的生命周期][Angular4-_-]

## 简介 ##

Angular 指令的生命周期，它是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子，便于我们监控指令生命周期的变化，并执行相关的操作。Angular 中所有的钩子如下图所示：  
![871373-20171105160258420-242077080.png][]

## 分类 ##

*  指令与组件共有的钩子
    
     *  ngOnChanges
     *  ngOnInit
     *  ngDoCheck
     *  ngOnDestroy
 *  组件特有的钩子
    
     *  ngAfterContentInit
     *  ngAfterContentChecked
     *  ngAfterViewInit
     *  ngAfterViewChecked

## 调用顺序 ##

1.  ngOnChanges - 当数据绑定输入属性的值发生变化时调用
2.  ngOnInit - 在第一次 ngOnChanges 后调用
3.  ngDoCheck - 自定义的方法，用于检测和处理值的改变
4.  ngAfterContentInit - 在组件内容初始化之后调用
5.  ngAfterContentChecked - 组件每次检查内容时调用
6.  ngAfterViewInit - 组件相应的视图初始化之后调用
7.  ngAfterViewChecked - 组件每次检查视图时调用
8.  ngOnDestroy - 指令销毁前调用

## 如何实现 ##

要实现生命周期钩子，只需实现对应的接口即可，如实现`ngOnChanges`钩子只需实现`OnChanges`接口即可：

export class XxxComponent implements 
      OnInit, OnChanges, 
      DoCheck, AfterContentInit, 
      AfterContentChecked, AfterViewChecked, 
      AfterViewInit, OnDestroy { 
        // balabalabala... 
    }

### ngOnChanges ###

触发条件

OnChanges只对输入的不可变对象起作用。  
输入属性以前说过，使用`@Input`装饰的属性，这里还需要注意不可变对象，在Angular中，典型的不可变对象是`string`类型，但所有自定义对象均为可变对象，如：`user:{name:string}`，可变对象即使被定义为输入属性，也不会触发`OnChanges`方法。

ngOnChanges方法参数

ngOnChanges方法有一个`SimpleChanges`类型的参数，它其实是一个类型为`SimpleChange`，并且键值为属性名的数组:

export interface SimpleChanges { [propName: string]: SimpleChange; }

而`SimpleChange`的结构如下：

export declare class SimpleChange {
        previousValue: any;
        currentValue: any;
        firstChange: boolean;
        constructor(previousValue: any, currentValue: any, firstChange: boolean);
        /**
         * Check whether the new value is the first value assigned.
         */
        isFirstChange(): boolean;
    }

假如我们的组件中有一个满足触发`OnChanges`钩子条件的属性名叫`inputVal`，那么可以通过如下方式获取它变化前后的值：

ngOnChanges(changes: SimpleChanges): void {
        console.log('ngOnChanges中inputVal变更前值为：'+ changes['inputVal'].previousValue);
        console.log('ngOnChanges中inputVal变更后值为：'+ changes['inputVal'].currentValue);
      }

### ngOnInit ###

在第一次 ngOnChanges 执行之后调用，并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。

### ngDoCheck ###

当组件的输入属性发生变化时，将会触发 ngDoCheck 方法。我们可以使用该方法，自定义我们的检测逻辑。

**特别注意**，使用时要比较精准的定义检查位置，否则会造成性能问题，因为任何变化，比如鼠标的点击事件或键盘的输入事件都会触发`ngDoCheck`。

### ngAfterContentInit ###

在组件使用 ng-content 指令的情况下，Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。

### ngAfterContentChecked ###

在组件使用 ng-content 指令的情况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用。

### ngAfterViewInit ###

在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。

### ngAfterViewChecked ###

组件每次检查视图时调用

### ngOnDestroy ###

在指令被销毁前，将会调用 ngOnDestory 方法。它主要用于执行一些清理操作，比如：移除事件监听、清除定时器、退订 Observable 等。

[https_blog.csdn.net_Young4Dream_article_details_78453357]: https://blog.csdn.net/Young4Dream/article/details/78453357
[Angular4-_-]: https://blog.csdn.net/zsx157326/article/details/78410033
[871373-20171105160258420-242077080.png]: /images/20220513/be922d285ff147b69d83208f9959a93a.png