[JavaScript知识库]Angular组件的生命周期

生命周期相关方法：ngOnChanges()，ngOnInit() ，ngDoCheck() ， ngAfterContentInit() ， ngAfterContentChecked() ， ngAfterViewInit() ，ngAfterViewChecked()，ngOnDestory()

当组件第一次被创建时候执行是这样的

constructor() → ngOnChanges() → ngOnInit() → ngDoCheck() → ngAfterContentInit() → ngAfterContentChecked() → ngAfterViewInit() → ngAfterViewChecked()

当组件输入值发生变化时是这样的

ngDoCheck() → ngAfterContentChecked() → ngAfterViewChecked() → ngOnChanges() → ngDoCheck() → ngAfterContentChecked() → ngAfterViewChecked()

当组件被销毁移除时是这样的

ngDoCheck() → ngAfterContentChecked() → ngAfterViewChecked() → ngOnDestory()

总结：Init相关方法只在创建组件初始化时执行一次（适合做初始化工作），ngOnChanges在初始化和每次输入发生变化时都要执行（代码宜保持精简，不宜复杂），Check相关方法在每次变化时都要执行（代码宜保持精简，不宜复杂），ngOnDestory只在组件销毁的时候执行一次（适合做清理工作）。

官方示例代码：

// tslint:disable: no-conflicting-lifecycle
import {
  AfterContentChecked,
  AfterContentInit,
  AfterViewChecked,
  AfterViewInit,
  Component,
  DoCheck,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  SimpleChanges
} from '@angular/core';

import { LoggerService } from './logger.service';
import { PeekABooDirective } from './peek-a-boo.directive';

@Component({
  selector: 'peek-a-boo',
  template: '<p>Now you see my hero, {{name}}</p>'
})
// Don't HAVE to mention the Lifecycle Hook interfaces
// unless we want typing and tool support.
export class PeekABooComponent extends PeekABooDirective implements
             OnChanges, OnInit, DoCheck,
             AfterContentInit, AfterContentChecked,
             AfterViewInit, AfterViewChecked,
             OnDestroy {
  @Input() name = '';

  private verb = 'initialized';

  constructor(logger: LoggerService) {
    super(logger);

    const is = this.name ? 'is' : 'is not';
    this.logIt(`name ${is} known at construction`);
  }

  // only called for/if there is an @input variable set by parent.
  ngOnChanges(changes: SimpleChanges) {
    const changesMsgs: string[] = [];
    for (const propName in changes) {
      if (propName === 'name') {
        const name = changes.name.currentValue;
        changesMsgs.push(`name ${this.verb} to "${name}"`);
      } else {
        changesMsgs.push(propName + ' ' + this.verb);
      }
    }
    this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
    this.verb = 'changed'; // next time it will be a change
  }

  // Beware! Called frequently!
  // Called in every change detection cycle anywhere on the page
  ngDoCheck() { this.logIt(`DoCheck`); }

  ngAfterContentInit() { this.logIt(`AfterContentInit`);  }

  // Beware! Called frequently!
  // Called in every change detection cycle anywhere on the page
  ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }

  ngAfterViewInit() { this.logIt(`AfterViewInit`); }

  // Beware! Called frequently!
  // Called in every change detection cycle anywhere on the page
  ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }

  ngOnDestroy() { this.logIt(`OnDestroy`); }
}