Angular 生命周期

ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。 

export class NGLifeTimeTestChildComponent implements OnChanges, OnInit {
    count: number = 0;
    constructor() {
        this.count = -2;
        console.log('constructor');
    ngOnInit() {
        setTimeout(() => {
            this.count = -1;
        }, 1000);
        console.log('ngOnInit');
    countClick() {
        this.count += 1;

  • 这段代码会先执行属性赋值，赋值为 0
    • 

  • 再执行constructor赋值，赋值为 -2
    • 

  • 再执行ngOnInit，此处用了延时，页面会先展示 -2，1s 后改为-1，所以页面是先显示，再执行ngOnInit 方法

    提示: ngOnInit 是获取初始化数据最好的地方
    

    ngOnChanges()
    

    如果组件绑定过输入属性(@Input)，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。如果组件没有任何输入属性则不会调用。当 Angular 设置或重新设置数据绑定的输入属性时会调用，该方法接受当前和上一属性值的 SimpleChanges 对象.这发生的非常频繁，所以你在这里执行的任何操作都会显著影响性能。
    

    ngOnChanges(changes: SimpleChanges) {
  for (const propName in changes) {
      const chng = changes[propName];
      const cur  = JSON.stringify(chng.currentValue);
      const prev = JSON.stringify(chng.previousValue);

    ngDoCheck()
    

    紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。换句话说，就是任何属性发生变化都会被调用。
    

    export class NGLifeTimeTestChildComponent implements OnChanges, OnInit {
    @Input() hero: string = '';
    @Input() power: string = '';
    changeLog: string[] = [];
    count: number = 0;
    constructor() {
        this.count = -2;
        console.log('constructor');
    ngOnChanges(changes: SimpleChanges) {
    ngOnInit() {
      setTimeout(() => {
        this.count = -1;
      }, 1000);
      console.log('ngOnInit');
    ngDoCheck(){
      console.log('ngDoCheck');
    ngAfterContentInit(){
      console.log('ngAfterContentInit');
    countClick() {
        this.count += 1;

  • 这段代码中ngDoCheck会在ngOnChanges和ngOnInit之后调用两次
    • 

  • constructor 给count 赋值不会调用
    • 

  • ngOnInit 和 countClick 给count 赋值会调用
    • 

  • 子组件属性发生变化，父组件的DoCheck也会被调用
    • 

    ngAfterContentInit()
    

    第一次 ngDoCheck() 之后调用，只调用一次。
    

    ngAfterContentChecked()
    

    在ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
    

    ngAfterViewInit()
    

    第一次 ngAfterContentChecked() 之后调用，只调用一次。
    

    ngAfterViewChecked()
    

    ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
    

    ngOnDestroy()
    

    在 Angular 销毁指令或组件之前立即调用。
    
可以做以下事情